{"componentChunkName":"component---src-templates-post-js","path":"/blog/eslint","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🚑 Eslint 周边","tips":[],"categories":["code"],"datetime":"2019-11-18 23:31:36","noFooter":false,"description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","plainTextDescription":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/eslint","tags":["ESLint","前端","最佳实践"]},"headings":[{"value":"1. ESlint 是个什么","depth":2},{"value":"2. 简单使用","depth":2},{"value":"3. ESlint 常见方案","depth":2},{"value":"4. Prettier","depth":2},{"value":"5. typescript","depth":2},{"value":"6. 编辑器插件","depth":2},{"value":"7. 配置","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"eslint\",\n \"title\": \"🚑 Eslint 周边\",\n \"date\": \"2019-11-18 23:31:36\",\n \"author\": \"Ubug\",\n \"description\": \"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.\",\n \"categories\": [\"code\"],\n \"tags\": [\"ESLint\", \"前端\", \"最佳实践\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 ESLint \\u7684\\u7B80\\u5355\\u80CC\\u666F\\u548C\\u7528\\u6CD5\\uFF0C\\u4EE5\\u53CA\\u77E5\\u9053 ESLint \\u600E\\u4E48\\u5728\\u9879\\u76EE\\u4E2D\\u53D1\\u6325\\u4F5C\\u7528\\u7684\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1. ESlint \\u662F\\u4E2A\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u987E\\u540D\\u601D\\u4E49 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ECMAScript Linter\"), \" \\u5C31\\u662F\\u4E00\\u4E2A ES \\u89C4\\u8303\\u7684\\u68C0\\u67E5\\u5668\\uFF0C\\u8D1F\\u8D23\\u68C0\\u67E5\\u4EE3\\u7801\\u8BED\\u6CD5/\\u98CE\\u683C/\\u9519\\u8BEF\\u3002\"), mdx(\"p\", null, \"\\u5728\\u5929\\u5730\\u521D\\u5F00\\u4E4B\\u65F6\\uFF0CJS \\u4F9D\\u9760\\u8BED\\u6CD5\\u5BBD\\u677E\\u3001\\u52A8\\u6001\\u8FD0\\u884C\\u7684\\u7279\\u70B9\\u66F4\\u5BB9\\u6613\\u4F4E\\u95E8\\u69DB\\u5B9E\\u73B0\\u4E1A\\u52A1\\u83B7\\u5F97\\u9752\\u7750\\uFF0C\\u4F46\\u4E5F\\u662F\\u56E0\\u6B64\\u5F88\\u591A\\u8BED\\u6CD5\\u548C\\u903B\\u8F91\\u9519\\u8BEF\\u65E0\\u6CD5\\u5728\\u9759\\u6001\\u68C0\\u67E5\\u9636\\u6BB5\\u88AB\\u53D1\\u73B0\\uFF0C\\u4E8E\\u662F JSLint \\u8BED\\u6CD5\\u68C0\\u67E5\\u5668\\u51FA\\u4E16\\uFF0C\\u80FD\\u591F\\u6EE1\\u8DB3\\u57FA\\u672C\\u7684\\u4EE3\\u7801\\u9759\\u6001\\u68C0\\u67E5\\u9700\\u6C42\\uFF0C\\u4F46\\u662F\\u6269\\u5C55\\u6027\\u5DEE\\u51E0\\u4E4E\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u540E\\u6765\\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u53C8 fork \\u51FA\\u4E86 JSHint\\uFF0C\\u5F88\\u957F\\u65F6\\u95F4\\u5185\\u8FD9\\u4E24\\u4E2A\\u5DE5\\u5177\\u548C\\u76F8\\u5173\\u751F\\u6001\\u652F\\u6301\\u4E86\\u6700\\u5F00\\u59CB\\u7684\\u4EE3\\u7801\\u68C0\\u67E5\\u9700\\u6C42\\uFF0C\\u6BD5\\u7ADF\\u5F53\\u4E8B\\u7684 ES \\u7248\\u672C\\u7A33\\u5B9A\\u4E0D\\u53D8\\u4E86\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u3002\\u968F\\u7740\\u65F6\\u4EE3\\u7684\\u53D1\\u5C55\\uFF0C\\u66F4\\u52A0\\u597D\\u7528\\u5BB9\\u6613\\u914D\\u7F6E\\u7684 eslint \\u91C7\\u7528 ast \\u7B49\\u529F\\u80FD\\u5728 es5 \\u7684\\u65F6\\u4EE3\\u5927\\u653E\\u5F02\\u5F69\\uFF0C\\u6BD4\\u5982 babel-eslint\\uFF0C\\u4E00\\u4E2A\\u63D2\\u4EF6\\u5C31\\u652F\\u6301\\u4E86\\u66F4\\u9AD8\\u7EA7\\u7684\\u8BED\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u6700\\u5F00\\u59CB\\u7684\\u9700\\u6C42\\u662F\\u5728\\u4EE3\\u7801\\u4E0A\\u7EBF\\u4E4B\\u524D\\u68C0\\u67E5\\u51FA\\u4EE3\\u7801\\u4E2D\\u7684\\u8BED\\u6CD5\\u9519\\u8BEF\\u95EE\\u9898\\u3001\\u7F16\\u7801\\u95EE\\u9898\\u8FD8\\u6709\\u4E00\\u4E9B\\u4EE3\\u7801\\u98CE\\u683C\\u95EE\\u9898\\u3002\\u540E\\u9762\\u6709\\u7F16\\u8F91\\u5668\\u7684\\u652F\\u6301\\u5C31\\u53EF\\u4EE5\\u5728\\u7F16\\u7801\\u7684\\u8FC7\\u7A0B\\u4E2D\\u5B9E\\u65F6\\u7684\\u63D0\\u793A\\u8BED\\u6CD5\\u95EE\\u9898\\u3002\\u518D\\u540E\\u6765\\u53EF\\u4EE5\\u5728\\u56E2\\u961F\\u534F\\u4F5C\\u65F6\\u63D0\\u524D\\u5F3A\\u5236\\u68C0\\u67E5\\u9519\\u8BEF\\u548C\\u98CE\\u683C\\u3002\\u5230\\u73B0\\u5728\\u65E0\\u8BBA\\u662F\\u4E2A\\u4EBA\\u8FD8\\u662F\\u56E2\\u961F\\u4F5C\\u4E3A\\u5FC5\\u9009\\u529F\\u80FD\\u96C6\\u6210\\u5728\\u9879\\u76EE\\u4E2D\\u3002\"), mdx(\"p\", null, \"ESlint \\u5F97\\u4EE5\\u6D41\\u884C\\u7684\\u5F88\\u91CD\\u8981\\u539F\\u56E0\\u662F\\u7075\\u6D3B\\u7684\\u53EF\\u914D\\u7F6E\\u9879\\uFF0C\\u5305\\u62EC plugins \\u6269\\u5C55\\u3001\\u7EE7\\u627F\\u3001\\u89E3\\u6790\\u5668\\u3001\\u548C\\u7EC6\\u81F4\\u53EF\\u914D\\u7F6E\\u7684\\u89C4\\u5219\\u7B49\\u5F3A\\u5927\\u529F\\u80FD\\u3002\"), mdx(\"h2\", null, \"2. \\u7B80\\u5355\\u4F7F\\u7528\"), mdx(\"p\", null, \"\\u5728\\u5DE5\\u4F5C\\u6587\\u4EF6\\u5939\\u4E0B\\u6267\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-zsh\"\n }, \"yarn add eslint --dev\\n\")), mdx(\"p\", null, \"\\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u6700\\u7B80\\u5355\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-zsh\"\n }, \"npx eslint --init\\n\")), mdx(\"p\", null, \"\\u6B64\\u5904\\u5C31\\u4F1A\\u95EE\\u662F\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"check syntax, find problems, and enforce code style\"), \" \\u7684\\u4E09\\u4E2A\\u529F\\u80FD\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u662F\\u6574\\u4E2A ESLint \\u7684\\u5168\\u90E8\\u76EE\\u7684\\u3002\"), mdx(\"p\", null, \"\\u518D\\u65B0\\u5EFA\\u4E00\\u4E2A\\u793A\\u4F8B\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"// demo.js\\nfunction add(a, b) {\\n return a + b;\\n}\\n\\nconsole.log(add(1, 1));\\n\")), mdx(\"p\", null, \"\\u8FD0\\u884C\\u68C0\\u67E5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-zsh\"\n }, \"eslint demo.js\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-log\"\n }, \"/workspace/demo.js\\n\\n/Users/ubug/codes/kitu-demos/eslint/demo.js\\n 2:1 error Expected indentation of 4 spaces but found 2 indent\\n 2:15 error Extra semicolon semi\\n 5:1 error Unexpected console statement no-console\\n 5:23 error Extra semicolon semi\\n\\n\\u2716 4 problems (4 errors, 0 warnings)\\n 3 errors and 0 warnings potentially fixable with the `--fix` option.\\n\")), mdx(\"p\", null, \"\\u8BED\\u6CD5\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u6709 4 \\u4E2A\\u9519\\u8BEF\\uFF0C3\\u4E2A\\u53EF\\u4EE5\\u81EA\\u52A8\\u4FEE\\u590D\\u3002\\u5206\\u522B\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"indent\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"semi\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"no-console\"), \" \\u4E09\\u4E2A\\u9519\\u8BEF\\uFF0C\\u6309\\u7167\\u8BF4\\u660E\\u6765\\u770B\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"indent\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"semi\"), \" \\u662F\\u6837\\u5F0F\\u95EE\\u9898\\uFF0C\\u800C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"no-console\"), \" \\u662F\\u4E25\\u683C\\u7684\\u4EE3\\u7801\\u95EE\\u9898\\u3002\"), mdx(\"h2\", null, \"3. ESlint \\u5E38\\u89C1\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u56E2\\u961F\\u534F\\u4F5C\\u5DE5\\u4F5C\\u4E2D\\uFF0C\\u4EE3\\u7801\\u89C4\\u8303\\u8D8A\\u6765\\u8D8A\\u4E3E\\u8DB3\\u8F7B\\u91CD\\uFF0C\\u4FDD\\u6301\\u540C\\u6837\\u7684\\u4EE3\\u7801\\u98CE\\u683C\\uFF0C\\u964D\\u4F4E\\u57FA\\u672C\\u9519\\u8BEF\\u7684\\u51FA\\u73B0\\u7B49\\u90FD\\u662F\\u534F\\u4F5C\\u7684\\u57FA\\u7840\\uFF0C\\u975E\\u5E38\\u7684\\u4F9D\\u8D56\\u7C7B\\u4F3C ESlint \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u5B8C\\u6210\\u8FD9\\u4E9B\\u4E2A\\u76EE\\u6807\\uFF0C\\u6240\\u4EE5\\u5728\\u56E2\\u961F\\u4E2D\\u4F7F\\u7528 ESlint \\u7684\\u65B9\\u6848\\u8FD8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\uFF0C\\u4E0D\\u8FC7\\u56E2\\u961F\\u7684\\u4F7F\\u7528\\u5B9A\\u5236\\u548C\\u4E2A\\u4EBA\\u7684\\u5B9A\\u5236\\u6DF1\\u5EA6\\u4E0D\\u540C\\uFF0C\\u56E2\\u961F\\u7684\\u914D\\u7F6E\\u66F4\\u503E\\u5411\\u4E8E\\u4E25\\u683C\\uFF0C\\u4E2A\\u4EBA\\u7684\\u66F4\\u4E60\\u60EF\\u7A0D\\u7A0D\\u5BBD\\u677E\\uFF0C\\u52A0\\u4E0A\\u81EA\\u5DF1\\u7684\\u504F\\u597D\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npx eslint --init\"), \" \\u5728\\u7B80\\u5355\\u7684\\u4E2A\\u4EBA\\u9879\\u76EE\\u4E2D\\u8DB3\\u591F\\u4F7F\\u7528\\u4E86\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u60F3\\u6DF1\\u5165\\u5B9A\\u5236\\u7684\\u9700\\u6C42\\uFF0C\\u89C4\\u5219\\u548C\\u63D2\\u4EF6\\u751F\\u6001\\u975E\\u5E38\\u4E30\\u5BCC\\u7684\\u4ECA\\u5929\\uFF0C\\u8FD9\\u6837\\u7684\\u5B9A\\u5236\\u5F88\\u8017\\u8D39\\u7CBE\\u529B\\uFF0C\\u597D\\u5728\\u4E1A\\u5185\\u5DF2\\u7ECF\\u5B8C\\u6210\\u4E86\\u6BD4\\u8F83\\u6210\\u719F\\u7684\\u9884\\u8BBE\\u65B9\\u6848\\uFF0C\\u6BD4\\u5982\\u6BD4\\u8F83\\u65E9\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Airbnb\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Google\"), \" \\u5B9A\\u5236\\u7684\\u4E00\\u5957\\u89C4\\u8303\\uFF0C\\u5305\\u62EC ESlint \\u63A8\\u8350\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Standard\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Recommanded\"), \" \\u7B49\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u6709\\u5176\\u4ED6\\u5F88\\u591A\\u6846\\u67B6\\u3001\\u516C\\u53F8\\u4E5F\\u90FD\\u6709\\u5B9A\\u5236\\u7684\\u89C4\\u8303\\uFF0C\\u7528\\u6CD5\\u57FA\\u672C\\u5927\\u540C\\u5C0F\\u5F02\\uFF0C\\u63A8\\u8350\\u4E2A\\u4EBA\\u6839\\u636E\\u559C\\u597D\\u505A\\u4E00\\u4E2A\\u65B9\\u6848\\u53EF\\u4EE5\\u65B9\\u4FBF\\u5F88\\u591A\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u5E38\\u89C1\\u7684\\u662F\\u4F7F\\u7528\\u8F83\\u5F3A\\u68C0\\u67E5\\u7684 airbnb \\u6216\\u8005 standard \\u8FDB\\u884C\\u8BED\\u6CD5\\u68C0\\u67E5\\uFF0C\\u642D\\u914D Prettier \\u9650\\u5236\\u4E00\\u4E9B\\u56E2\\u961F\\u7279\\u6709\\u7684\\u4E60\\u60EF\\u9650\\u5236\\uFF0C\\u7136\\u540E\\u914D\\u5408 Husky \\u6216\\u8005 pre-commit \\u52A0\\u4E0A lint-staged \\u5B9E\\u73B0\\u63D0\\u4EA4\\u524D\\u5F3A\\u5236\\u68C0\\u67E5\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"standard\"), \" \\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"yarn add --dev eslint-config-standard eslint-plugin-standard\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"module.exports = {\\n \\\"extends\\\": [\\\"standard\\\"],\\n \\\"plugins\\\": [\\\"standard\\\"],\\n}\\n\")), mdx(\"h2\", null, \"4. Prettier\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Airbnb\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Standard\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Recommanded\"), \" \\u7B49\\u662F\\u6BD4\\u8F83\\u5B8C\\u6574\\u7684\\u8BED\\u6CD5\\u68C0\\u67E5\\uFF0C\\u4EE3\\u7801\\u89C4\\u8303\\uFF0C\\u683C\\u5F0F\\u5316\\uFF0C\\u4F46\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Prettier\"), \" \\u662F\\u6BD4\\u8F83\\u7279\\u6B8A\\u7684\\u4E00\\u4E2A\\uFF0C\\u5B83\\u53EA\\u8D1F\\u8D23\\u4EE3\\u7801\\u7684\\u683C\\u5F0F\\u5316\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u65B9\\u9762 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Prettier\"), \" \\u6709\\u72EC\\u7ACB\\u7684\\u5305\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u683C\\u5F0F\\u5316\\uFF0C\\u4E0D\\u4F9D\\u8D56 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESLint\"), \"\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\u53EF\\u4EE5\\u4EE5\\u63D2\\u4EF6\\u7684\\u5F62\\u5F0F\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESlint\"), \" \\u4E2D\\u5B58\\u5728\\uFF0C\\u4EE3\\u66FF \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESlint\"), \" \\u4E2D\\u7684\\u683C\\u5F0F\\u5316\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5 Prettier \\u662F\\u4E00\\u4E2A\\u53EA\\u8D1F\\u8D23\\u4EE3\\u7801\\u683C\\u5F0F\\u5316\\u7684\\u5DE5\\u5177\\uFF0C\\u8BED\\u6CD5\\u914D\\u7F6E\\u76F8\\u5173\\u7684\\u89C4\\u5219\\u4E0D\\u4F1A\\u6D89\\u53CA\\uFF0C\\u6240\\u4EE5\\u4E5F\\u53EF\\u4EE5\\u548C Airbnb \\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESLint\"), \" \\u7E41\\u591A\\u7684\\u89C4\\u5219\\uFF0C\\u521D\\u59CB\\u5316\\u7684\\u65F6\\u5019\\u4E5F\\u4F1A\\u63D0\\u793A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"To check syntax, find problems, and enforce code style\"), \"\\uFF0C\\u6240\\u4EE5\\u529F\\u80FD\\u5206\\u4E3A \\u8BED\\u6CD5\\u68C0\\u67E5(a=;)\\u3001\\u95EE\\u9898\\u53D1\\u73B0(\\u4E0D\\u5141\\u8BB8\\u4F7F\\u7528 console\\uFF0C\\u4F46\\u662F\\u68C0\\u6D4B\\u5230\\u4E86 console) \\u548C \\u4EE3\\u7801\\u683C\\u5F0F\\u5316(\\u7A7A\\u683C\\u7F29\\u8FDB\\u6570) \\u4E09\\u4E2A\\u529F\\u80FD\\u3002\\u201C\\u4EE3\\u7801\\u683C\\u5F0F\\u5316\\u201D \\u5C31\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Prettier\"), \" \\u8981\\u8986\\u76D6\\u548C\\u62D3\\u5C55\\u7684\\u3002\"), mdx(\"p\", null, \"\\u7981\\u7528prettier\\u51B2\\u7A81\\u7684\\u89C4\\u5219\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"yarn add --dev eslint-config-prettier\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"module.exports = {\\n \\\"extends\\\": [\\\"prettier\\\"]\\n}\\n\")), mdx(\"p\", null, \"\\u7528 eslint \\u63A5\\u7BA1 prettier \\u7684\\u8FD0\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"yarn add --dev eslint-plugin-prettier\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"module.exports = {\\n \\\"extends\\\": [\\\"prettier\\\"],\\n \\\"plugins\\\": [\\\"prettier\\\"],\\n}\\n\")), mdx(\"h2\", null, \"5. typescript\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TypeScript\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ECMAScript\"), \" \\u76F8\\u6BD4\\u53EF\\u4EE5\\u7B97\\u662F\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u4E86\\uFF0C\\u89E3\\u6790\\u662F\\u4E0D\\u540C\\u7684\\uFF0C\\u521A\\u5F00\\u59CB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Typescript\"), \" \\u4F7F\\u7528\\u81EA\\u5DF1\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tslint\"), \" \\u6765\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u529F\\u80FD\\uFF0C\\u4F46\\u662F\\u968F\\u7740\\u53D1\\u5C55\\u548C\\u5B9A\\u5236\\u5316\\u8981\\u6C42\\u8D8A\\u6765\\u8D8A\\u9AD8\\uFF0C\\u76EE\\u524D\\u5B98\\u65B9\\u5DF2\\u7ECF\\u653E\\u5F03\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tslint\"), \"\\uFF0C\\u8F6C\\u800C\\u5B9E\\u73B0\\u76F8\\u5173\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESlint\"), \" \\u751F\\u6001\\uFF0C\\u8FD9\\u5176\\u5B9E\\u662F\\u66F4\\u597D\\u7684\\u9009\\u62E9\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"yarn add --dev @typescript-eslint\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"module.exports = {\\n \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n \\\"plugins\\\": [\\n \\\"@typescript-eslint\\\"\\n ],\\n};\\n\")), mdx(\"h2\", null, \"6. \\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\"), mdx(\"p\", null, \"\\u5982\\u679C\\u4F60\\u5728\\u9879\\u76EE\\u6839\\u76EE\\u5F55\\u4E0B\\u9762\\u521B\\u5EFA\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".eslintrc\"), \"\\uFF0C\\u7136\\u540E\\u5B89\\u88C5 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"eslint\"), \" \\u7684\\u63D2\\u4EF6\\uFF0C\\u7F16\\u8F91\\u5668\\u4F1A\\u63D0\\u4F9B\\u8BED\\u6CD5\\u3001\\u9519\\u8BEF\\u548C\\u683C\\u5F0F\\u5316\\u7684\\u63D0\\u793A\\uFF0C\\u4ECE\\u8FD9\\u4E2A\\u7528\\u5904\\u6765\\u8BF4\\u4E5F\\u4E0D\\u7528\\u5B89\\u88C5\\u4F9D\\u8D56\\u4E86\\uFF1F\"), mdx(\"p\", null, \"\\u5B89\\u88C5\\u4F9D\\u8D56\\u4E0E\\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\\u7684\\u533A\\u522B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B89\\u88C5\\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\\uFF0C\\u80FD\\u6839\\u636E\\u9879\\u76EE\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u5B9E\\u73B0\\u7F16\\u8F91\\u5668\\u5B9E\\u65F6\\u7684\\u4EE3\\u7801\\u68C0\\u67E5\\u3001\\u98CE\\u683C\\u683C\\u5F0F\\u5316\\u7B49\\u529F\\u80FD\\uFF0C\\u4F46\\u662F\\u53BB\\u9664\\u63D2\\u4EF6\\u6216\\u8005\\u66F4\\u6362\\u7F16\\u8F91\\u5668\\u8FD9\\u4E9B\\u529F\\u80FD\\u5C31\\u4E22\\u5931\\u4E86\\uFF0C\\u6BD5\\u7ADF\\u662F\\u63D2\\u4EF6\\u63D0\\u4F9B\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B89\\u88C5\\u4F9D\\u8D56\\uFF0C\\u6839\\u636E npm \\u811A\\u672C\\u8BBE\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u7528 githook \\u6216\\u8005\\u624B\\u52A8\\u8FD0\\u884C\\u7684\\u65B9\\u5F0F\\u5728\\u547D\\u4EE4\\u884C\\u8FD0\\u884C\\uFF0C\\u4E0D\\u4F9D\\u6258\\u4E8E\\u7F16\\u8F91\\u5668\\uFF0C\\u4F46\\u662F\\u5E76\\u4E0D\\u80FD\\u63D0\\u4F9B\\u7F16\\u8F91\\u5668\\u754C\\u9762\\u4E0A\\u7684\\u63D0\\u793A\\u3002\")), mdx(\"h2\", null, \"7. \\u914D\\u7F6E\"), mdx(\"p\", null, \"ESLint \\u914D\\u7F6E\\u6587\\u4EF6\\u751F\\u6548\\u4F18\\u5148\\u7EA7\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u7528\\u6CD5\\u4E0D\\u804A\\uFF0C\\u4E00\\u7BC7\\u5B98\\u65B9\\u6587\\u6863\\u5373\\u53EF\\u5B8C\\u6574\\u8BF4\\u660E\\u5168\\u90E8\\u7684\\u914D\\u7F6E\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://eslint.org/docs/user-guide/configuring\"\n }, \"Configuring ESLint\"), \"\\uFF0C\\u6216\\u8005 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://cn.eslint.org/docs/user-guide/configuring\"\n }, \"\\u4E2D\\u6587\\u7F51\\u7AD9\"), \" \\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"extends\\\": \\\"eslint:recommended\\\",\\n \\\"parserOptions\\\": {\\n \\\"ecmaVersion\\\": 6,\\n \\\"sourceType\\\": \\\"module\\\",\\n \\\"ecmaFeatures\\\": {\\n \\\"jsx\\\": true\\n }\\n },\\n \\\"env\\\": {\\n \\\"browser\\\": true,\\n \\\"node\\\": true\\n },\\n \\\"plugins\\\": [\\n \\\"import\\\",\\n \\\"node\\\",\\n \\\"promise\\\",\\n \\\"standard\\\"\\n ],\\n \\\"globals\\\": {\\n \\\"document\\\": \\\"readonly\\\",\\n \\\"navigator\\\": \\\"readonly\\\",\\n \\\"window\\\": \\\"readonly\\\"\\n },\\n \\\"rules\\\": {\\n \\\"semi\\\": 2\\n },\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"35cce3eb-69c1-5c43-b940-6dd9198359ee","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/typescript/typescript.md","id":"d0d2f052-390f-57da-80c8-a426a86d8810","parent":{"name":"typescript","sourceInstanceName":"blog"},"excerpt":"…","fields":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","slug":"/blog/typescript","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","date":"2019-11-21","redirects":null,"datetime":"2019-11-21 11:47:10","categories":["code"],"series":null,"tags":["整理","TypeScript","TS","前端"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","TypeScript","TS","前端"],"theme":null,"slug":"typescript","date":"2019-11-21 11:47:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"typescript\",\n \"title\": \"🏃‍♂️ TypeScript 以及一些理解和技巧\",\n \"date\": \"2019-11-21 11:47:10\",\n \"author\": \"Ubug\",\n \"description\": \"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"TypeScript\", \"TS\", \"前端\"],\n \"banner\": \"./typescript.png\",\n \"bannerCredit\": \"Banner from [typescript](https://www.memsql.com/blog/porting-30k-lines-of-code-from-flow-to-typescript/)\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h3\", null, \"1. \\u53EF\\u63A8\\u65AD\\u7F16\\u7A0B\\u7684\\u4F53\\u9A8C\"), mdx(\"p\", null, \"\\u771F\\u6B63\\u7684\\u9762\\u5411\\u63A5\\u53E3\\u7F16\\u7A0B\\uFF0C\\u66F4\\u81EA\\u7136\\u5B8C\\u5907\\u7684\\u6A21\\u5757\\u548C\\u903B\\u8F91\\u62BD\\u8C61\\uFF0C\\u8BA9\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\u4ECE\\u600E\\u4E48\\u5B9E\\u73B0\\u7ED3\\u679C\\uFF0C\\u53D8\\u6210\\u4E86\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u9700\\u6C42\\u4EA4\\u4ED8\\uFF0C\\u53BB\\u601D\\u8003\\u63A5\\u53E3\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u53BB\\u8BBE\\u8BA1\\u6A21\\u5757\\u548C\\u4EE3\\u7801\\uFF0C\\u66F4\\u4F55\\u51B5\\u4EC5\\u4EC5\\u662F\\u4EE3\\u7801\\u63D0\\u793A\\u548C\\u5BF9\\u63A5\\u8054\\u8C03\\u5C31\\u8DB3\\u591F\\u8BA9\\u4F60\\u723D\\u7FFB\\u5929\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u590D\\u6742\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u96C6\\u6210\\u4ECE\\u6765\\u4E0D\\u662F\\u90A3\\u4E48\\u987A\\u5229\\uFF0C\\u529F\\u80FD\\u7684\\u5347\\u7EA7\\u91CD\\u6784\\u3001\\u9879\\u76EE\\u7684\\u4EA4\\u63A5\\u4E00\\u76F4\\u662F\\u5F00\\u53D1\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u5757\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5E76\\u4E0D\\u662F\\u6BCF\\u4E2A\\u4EBA\\u3001\\u6BCF\\u6B21\\u90FD\\u80FD\\u6E05\\u695A\\u7684\\u8BB0\\u4F4F\\u9879\\u76EE\\u7684\\u63A5\\u53E3\\u3001\\u53C2\\u6570\\u3001\\u7C7B\\u578B\\u7B49\\uFF0C\\u8FD9\\u5757\\u51FA\\u73B0\\u7684\\u9519\\u8BEF\\u5728\\u524D\\u7AEF\\u5360\\u4E86\\u5F88\\u5927\\u4E00\\u4E2A\\u6BD4\\u4F8B\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u6D4B\\u8BD5\\u624D\\u80FD\\u8986\\u76D6\\u8FD9\\u5757\\u7684\\u8D28\\u91CF\\u4FDD\\u8BC1\\u3002\\u53EF\\u662F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u9759\\u6001\\u8BED\\u8A00\\u5176\\u5B9E\\u5E76\\u4E0D\\u662F\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u8D56\\u4E8E document \\u6CE8\\u91CA\\uFF0C\\u8FD9\\u5176\\u5B9E\\u5BF9\\u5F88\\u591A\\u4EBA\\u662F\\u4E00\\u79CD\\u8D1F\\u62C5\\uFF0C\\u5F88\\u591A\\u4EBA\\u53EA\\u4F7F\\u7528\\u5185\\u7F6E\\u7684\\u5B98\\u65B9\\u63D0\\u793A\\uFF0C\\u4E0D\\u80FD\\u4EAB\\u53D7\\u7C7B\\u578B\\u601D\\u7EF4\\u7684\\u597D\\u5904\\u3002TS \\u4F7F\\u7528\\u4E00\\u4E9B\\u6807\\u8BB0\\u548C\\u7C7B\\u578B\\u58F0\\u660E\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u5E26\\u6709\\u4EE3\\u7801\\u63D0\\u793A\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u80FD\\u8BA9\\u6548\\u7387\\u548C\\u8D28\\u91CF\\u66F4\\u597D\\uFF0C\\u81F3\\u5C11\\u4EE3\\u7801\\u8D28\\u91CF\\u91CC\\u9762\\u9759\\u6001\\u68C0\\u67E5\\u6CA1\\u6709\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u90FD\\u662F Typescript \\u5E26\\u6765\\u7684\\u91CD\\u8981\\u7279\\u6027\\uFF0CTS \\u80FD\\u5E2E\\u6211\\u4EEC\\u68B3\\u7406\\u6E05\\u4E0D\\u540C\\u7684\\u63A5\\u53E3\\u3001\\u5929\\u751F\\u7684\\u8BA9\\u4F60\\u77E5\\u9053\\u8FD9\\u4E2A\\u63A5\\u53E3\\u5E94\\u8BE5\\u600E\\u4E48\\u6837\\u7684\\uFF0C\\u5728\\u8FD0\\u884C\\u65F6\\u624D\\u80FD\\u770B\\u5230\\u7684\\u95EE\\u9898\\u5728\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5C31\\u5F88\\u660E\\u663E\\u7684\\u66B4\\u9732\\u4E86\\u3002\"), mdx(\"h3\", null, \"2. type \\u548C interface \\u7684\\u533A\\u522B\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"TL;DR: \\u5185\\u90E8\\u4F7F\\u7528\\u53EA\\u8981\\u7A0B\\u5E8F\\u4E00\\u81F4\\uFF0C\\u90FD\\u53EF\\u4EE5\\uFF0Ctype \\u66F4\\u77ED\\u66F4\\u7075\\u6D3B\\u3002\\u63D0\\u4F9B\\u7B2C\\u4E09\\u65B9\\u5E93\\u58F0\\u660E\\u7684\\u65F6\\u5019\\u8BF7\\u4F7F\\u7528 interface\\u3002\")), mdx(\"p\", null, \"\\u521A\\u63A5\\u89E6\\u7684\\u65F6\\u5019\\u90FD\\u4F1A\\u7EA0\\u7ED3\\u5230\\u5E95\\u662F\\u7528\\u54EA\\u4E2A\\u6765\\u5B9A\\u4E49\\u7C7B\\u578B\\uFF0C\\u5B98\\u7F51\\u7684\\u8BF4\\u660E\\u4E2D\\u4E00\\u822C\\u662F\\u8FD9\\u4E48\\u53EB\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"interface = interface types\"), \" \\u63A5\\u53E3\\u7C7B\\u578B\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type = type aliases\"), \" \\u7C7B\\u578B\\u522B\\u540D\\u3002\\u4F46\\u662F\\u5B98\\u7F51\\u5F88\\u591A\\u8868\\u8FF0\\u73B0\\u5728\\u6709\\u70B9\\u95EE\\u9898\\uFF0C\\u76EE\\u524D\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c\"\n }, \"Interface vs Type alias in TypeScript 2.7\"), \"\\u3002\"), mdx(\"p\", null, \"\\u547D\\u540D\\u4E0A\\u4E00\\u4E2A\\u5F3A\\u8C03\\u63A5\\u53E3\\uFF0C\\u4E00\\u4E2A\\u5F3A\\u8C03\\u522B\\u540D\\uFF0C\\u6240\\u4EE5\\u6309\\u7167\\u6211\\u7684\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"interface \\u4F5C\\u4E3A\\u4E00\\u4E2A\\u6574\\u4F53\\u6765\\u63CF\\u8FF0\\u4E00\\u4E2A\\u5B9E\\u4F53\\u63A5\\u53E3\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"type \\u4F5C\\u4E3A\\u522B\\u540D\\u4F7F\\u7528\\uFF0C\\u4E00\\u822C\\u8F83\\u591A\\u7684\\u8868\\u793A\\u96C6\\u5408\\u6982\\u5FF5\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4E8C\\u8005\\u5728\\u8868\\u793A\\u5E38\\u89C1\\u7684\\u7ED3\\u6784\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4E92\\u76F8\\u8F6C\\u6362\\u3002\"))), mdx(\"p\", null, \"\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"interface\"), \" \\u5F3A\\u8C03 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"People\"), \" \\u4EBA\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u5B8C\\u6574\\u7684\\u7C7B\\u578B\\u3002\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" \\u5F3A\\u8C03\\u4E00\\u4E2A\\u6709\\u59D3\\u540D\\u3001\\u5E74\\u9F84\\u7B49\\u5C5E\\u6027\\u7684\\u96C6\\u5408\\u4F53\\uFF0C\\u522B\\u540D\\u548C\\u96C6\\u5408\\u3002\\u6211\\u4EEC\\u5E73\\u65F6\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u4E0D\\u9700\\u8981\\u523B\\u610F\\u5F3A\\u8C03\\u54EA\\u4E2A\\u662F\\u5BF9\\u7684\\uFF0C\\u56E0\\u4E3A\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u65E0\\u8BBA\\u58F0\\u660E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"interface\"), \" \\u8FD8\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" \\u5BF9\\u4E8E\\u7A0B\\u5E8F\\u903B\\u8F91\\u90FD\\u662F\\u6709\\u610F\\u4E49\\u53EF\\u63A8\\u65AD\\u7684\\uFF0C\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u4E5F\\u662F\\u53EF\\u4EE5\\u4E92\\u76F8\\u8F6C\\u6362\\u7684\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface People {\\n name: string;\\n age: number;\\n}\\n\")), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u60C5\\u51B5\\u53EF\\u4EE5\\u5199\\u6210\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"type People = {\\n name: string;\\n age: number;\\n}\\n\")), mdx(\"p\", null, \"\\u4E8C\\u8005\\u4E4B\\u95F4\\u4E00\\u4E9B\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\uFF0C\\u6BD4\\u5982\\u53EA\\u6709 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"interface\"), \" \\u53EF\\u4EE5\\u6709\\u58F0\\u660E\\u5408\\u5E76 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"declaration merging\"), \" \\u4E00\\u822C\\u591A\\u4EBA\\u534F\\u4F5C\\u6216\\u8005\\u7B2C\\u4E09\\u65B9\\u63A5\\u53E3\\u6269\\u5C55\\u6BD4\\u8F83\\u6709\\u7528\\u3002\"), mdx(\"h3\", null, \"3. \\u4E0D\\u8981\\u4F7F\\u7528 Any!\\u4E0D\\u8981\\u4F7F\\u7528 Any!\"), mdx(\"p\", null, \"\\u63A5\\u89E6 TS \\u521A\\u5F00\\u59CB\\uFF0C\\u5F88\\u591A\\u7684\\u7C7B\\u578B\\u58F0\\u660E\\u8BA4\\u4E3A\\u6CA1\\u5FC5\\u8981\\uFF0C\\u53EF\\u4EE5\\u7701\\u7565\\uFF0C\\u6240\\u4EE5\\u6DFB\\u52A0\\u4E86\\u5F88\\u591A\\u7684 any \\u5230\\u4EE3\\u7801\\u91CC\\u9762\\uFF0C\\u4F46\\u662F\\u8FD9\\u662F\\u5F88\\u4E0D\\u597D\\u7684\\u7F16\\u7A0B\\u5B9E\\u8DF5\\u3002\"), mdx(\"p\", null, \"\\u9664\\u975E\\u7B2C\\u4E09\\u65B9\\u4EE3\\u7801\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528 any \\u6765\\u4EC5\\u4EC5\\u4E3A\\u4E86\\u53BB\\u9664\\u7EA2\\u7EBF\\u63D0\\u793A\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u81EA\\u52A8\\u63A8\\u65AD\\u6765\\u51CF\\u5C11 any \\u7684\\u4F7F\\u7528\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"any \\u662F\\u4E00\\u4E2A\\u4EE3\\u7801 bug \\u9690\\u60A3\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4EE3\\u7801\\u7684\\u6BCF\\u4E00\\u4E2A\\u89D2\\u843D\\u90FD\\u9700\\u8981\\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4E0D\\u8981\\u4EE5\\u4E3A\\u6A21\\u5757\\u7B80\\u5355\\u3001\\u975E\\u6838\\u5FC3\\u5C31\\u76F4\\u63A5 any \\u4E86\\u4E8B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4EE3\\u7801\\u7684\\u91CD\\u6784\\u5982\\u679C\\u6CA1\\u6709\\u7C7B\\u578B\\u58F0\\u660E\\u652F\\u6301\\u5C06\\u4F1A\\u5F88\\u4E0D\\u53EF\\u9760\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6CA1\\u6709\\u81EA\\u52A8\\u8865\\u5168\\u652F\\u6301\")), mdx(\"p\", null, \"\\u5C3D\\u53EF\\u80FD\\u7684\\u5C06\\u4E0D\\u80FD\\u81EA\\u52A8\\u63A8\\u65AD\\u7684\\u7C7B\\u578B\\u624B\\u52A8\\u6807\\u6CE8\\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u8FD9\\u662F\\u7F16\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\u3002\"), mdx(\"h3\", null, \"4. \\u660E\\u786E\\u53EF\\u4EE5\\u81EA\\u52A8\\u63A8\\u65AD\\u7684\\uFF0C\\u53EF\\u4EE5\\u4E0D\\u7528\\u5199\\u7C7B\\u578B\\u58F0\\u660E\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u660E\\u786E\\u7C7B\\u578B\\u7684\\u503C\\u521D\\u59CB\\u5316\\uFF0C\\u80FD\\u591F\\u81EA\\u52A8\\u63A8\\u5012\\u53D8\\u91CF\\u7C7B\\u578B\\nlet someVal = 10;\\nconst someObj = { key1: 'val1', key2: 100 }\\n// ======== \\u4F46\\u662F\\u4E0D\\u80FD\\u5B8C\\u5907\\u521D\\u59CB\\u5316\\u7684\\u9664\\u5916\\uFF0C\\u4F8B\\u5982\\u4E0B\\u9762\\u5C31\\u4F1A\\u51FA\\u9519\\nconst someObj2 = {}\\nsomeObj2.x = 3;\\nsomeObj2.y = 4\\n\")), mdx(\"h3\", null, \"5. any, unknow\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"any \\u8868\\u793A\\u201C\\u8FD9\\u4E2A\\u6570\\u636E\\u53EF\\u80FD\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\uFF0C\\u4E0D\\u7528\\u7BA1\\u201D\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"unknow \\u8868\\u793A\\u201C\\u8FD9\\u4E2A\\u6570\\u636E\\u4E0D\\u77E5\\u9053\\u662F\\u4EC0\\u4E48\\u7C7B\\u578B\\uFF0C\\u9700\\u8981\\u8FDB\\u4E00\\u6B65\\u68C0\\u67E5\\u201D\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"let a: any = '123';\\na.say(); // \\u9759\\u6001\\u68C0\\u67E5\\u4E0D\\u4F1A\\u63D0\\u793A\\u95EE\\u9898\\n\\nlet a: unknow = '123';\\na.say(); // \\u9759\\u6001\\u68C0\\u67E5\\u4F1A\\u63D0\\u793A \\\"Object is of type 'unknown'\\\"\\n\\n// \\u81EA\\u52A8\\u63A8\\u65AD\\u540E\\u6536\\u7A84\\u7C7B\\u578B\\uFF0C\\u5141\\u8BB8\\u9759\\u6001\\u68C0\\u67E5\\u901A\\u8FC7\\nif (typeof a.say === 'function') {\\n a.say();\\n}\\n\")), mdx(\"p\", null, \"unknown \\u7C7B\\u578B\\u8981\\u6BD4 any \\u5B89\\u5168\\u5F97\\u591A\\uFF0C\\u5F3A\\u5236\\u6211\\u4EEC\\u5FC5\\u987B\\u8FDB\\u884C\\u68C0\\u67E5\\u624D\\u80FD\\u8FDB\\u4E00\\u6B65\\u6267\\u884C\\uFF0C\\u80FD\\u591F\\u907F\\u514D\\u8FD0\\u884C\\u65F6\\u7684\\u7C7B\\u578B\\u9519\\u8BEF\\u3002\\u4F46\\u662F\\u53EF\\u80FD\\u8FD9\\u4E2A\\u5F3A\\u5236\\u6027\\u6709\\u4E9B\\u5DE5\\u4F5C\\u91CF\\uFF0C\\u6240\\u4EE5\\u53EF\\u80FD\\u5F88\\u591A\\u4EBA\\u8FD8\\u662F any\\u3002\"), mdx(\"h3\", null, \"6. never\"), mdx(\"p\", null, \"\\u4FDD\\u62A4\\u6027\\u7C7B\\u578B\\u3001\\u515C\\u5E95\\u7C7B\\u578B\\u3001\\u5E95\\u90E8\\u7C7B\\u578B\\u3001\\u96F6\\u7C7B\\u578B\\u6216\\u7A7A\\u7C7B\\u578B\\u7B49\\u53EB\\u6CD5\\uFF0C\\u6BD4\\u5982\\u4E0B\\u9762\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9700\\u6C42\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type Foo = string | number;\\n\\nfunction runBar(foo: Foo) {\\n if(typeof foo === \\\"string\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n } else if(typeof foo === \\\"number\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6BB5\\u4EE3\\u7801\\u662F\\u6CA1\\u6709\\u95EE\\u9898\\u7684\\uFF0C\\u63A5\\u6536\\u7684\\u503C\\u6709\\u4E0D\\u540C\\u7684\\u7C7B\\u578B\\u6709\\u4E0D\\u540C\\u7684\\u5904\\u7406\\uFF0C\\u9759\\u6001\\u68C0\\u67E5\\u3001\\u8FD0\\u884C\\u65F6\\u90FD\\u80FD\\u901A\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5982\\u679C\\u534F\\u4F5C\\u7684\\u65F6\\u5019\\u51FA\\u73B0\\u95EE\\u9898\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"- type Foo = string | number;\\n+ type Foo = string | number | boolean;\\n\\n function runBar(foo: Foo) {\\n if(typeof foo === \\\"string\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n } else if(typeof foo === \\\"number\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n }\\n }\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65F6\\u5019\\u9759\\u6001\\u68C0\\u67E5\\u4E0D\\u4F1A\\u62A5\\u9519\\uFF0C\\u8FD0\\u884C\\u65F6\\u4E5F\\u4E0D\\u4F1A\\u62A5\\u9519\\uFF0C\\u4F46\\u662F\\u903B\\u8F91\\u4E0A\\u5C31\\u662F\\u6709\\u95EE\\u9898\\u7684\\uFF0C\\u6240\\u4EE5\\u521A\\u5F00\\u59CB\\u5E94\\u8BE5\\u4F7F\\u7528 never \\u6765\\u63A7\\u5236\\u7C7B\\u578B\\u7684\\u6D41\\u52A8\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type Foo = string | number;\\n\\nfunction runBar(foo: Foo) {\\n if(typeof foo === \\\"string\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n } else if(typeof foo === \\\"number\\\") {\\n // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n } else {\\n // foo \\u5728\\u8FD9\\u91CC\\u662F never\\n const check: never = foo;\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u522B\\u4EBA\\u6539\\u52A8\\u4E4B\\u540E\\u7F16\\u8BD1\\u9636\\u6BB5\\u5C31\\u80FD\\u53D1\\u73B0\\u8FD9\\u91CC\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"7. \\u7C7B\\u578B\\u6CDB\\u578B\\u8FD0\\u7B97\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface ComponentProps {\\n prop1: string;\\n}\\ninterface ComponentPropsWithChildren{\\n prop1: string;\\n children: React.ReactNode\\n}\\n// =========== \\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\nimport { PropsWithChildren } from 'react';\\ninterface ComponentPropsWithChildren = PropsWithChildren\\n\")), mdx(\"p\", null, \"\\u7528 Pick \\u64CD\\u4F5C\\u7B80\\u5316\\u7C7B\\u578B\\u58F0\\u660E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface Adult {\\n name: string;\\n age: number;\\n job: string;\\n}\\ninterface Child {\\n name: string;\\n age: number;\\n}\\n// =========== \\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype Child = {\\n [k in 'name' | 'age'] : Adult[k]\\n}\\n// =========== \\u4E5F\\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype Child = Pick\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"type SomeObject = { [ key: string ]: string }\\n// =========== \\u4E5F\\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype SomeObject = Record\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface UserLoginType {\\n username: string;\\n id: number;\\n avatar: string;\\n token: string;\\n}\\n// \\u7528 Omit \\u5254\\u9664\\u5C5E\\u6027\\ntype UserInfo = Omit\\n\")), mdx(\"p\", null, \"\\u53EF\\u4EE5\\u907F\\u514D\\u4E00\\u4E9B\\u91CD\\u590D\\u7684\\u4EE3\\u7801\"), mdx(\"h3\", null, \"8. \\u5185\\u7F6E\\u7684\\u4E00\\u4E9B\\u8F85\\u52A9\\u51FD\\u6570\"), mdx(\"p\", null, \"TS \\u7684\\u6CDB\\u578B\\u662F\\u5F88\\u5F3A\\u5927\\u7684\\u6982\\u5FF5\\uFF0C\\u5728\\u5F88\\u591A\\u6846\\u67B6\\u4E2D\\u90FD\\u80FD\\u770B\\u5230\\u8EAB\\u5F71\\uFF0C\\u662F\\u9759\\u6001\\u7C7B\\u578B\\u63A8\\u65AD\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u4E2A\\u5730\\u65B9\\u3002ts \\u7684 lib \\u58F0\\u660E\\u6587\\u4EF6\\u4E2D\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lib.es5.d.ts\"), \" \\u6709\\u5F88\\u591A\\u6709\\u610F\\u601D\\u7684\\u8F85\\u52A9\\u6CDB\\u578B\\u7C7B\\u578B\\u3002\"), mdx(\"p\", null, \"\\u6BCF\\u4E00\\u4E2A\\u90FD\\u5F88\\u7B80\\u6D01\\uFF0C\\u90FD\\u662F\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u7C7B\\u578B\\u64CD\\u4F5C\\uFF0C\\u6BD4\\u5982\\u4E0A\\u9762\\u8BF4\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Pick\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"class Model {\\n state: Readonly;\\n setState = (state: Pick) => {\\n this.state = { ...this.state, ...state };\\n };\\n}\\n\\n// ========= \\u5F88\\u7B80\\u5355\\u7684\\u7528 Pick \\u6765\\u53EA\\u5141\\u8BB8\\u76EE\\u6807\\u7C7B\\u578B\\u7684 key \\u7684\\u8F93\\u5165\\n\\ntype TodoState = {\\n list: string[];\\n lastUpdate: string;\\n}\\n\\nconst todoModel = new Model();\\ntodoModel.setState({\\n list: ['a1', 'b2'],\\n lastUpdate: '12:01',\\n})\\ntodoModel.setState({\\n unknowKey: '123' // \\u7C7B\\u578B\\u201C{ unknowKey: string; }\\u201D\\u7684\\u53C2\\u6570\\u4E0D\\u80FD\\u8D4B\\u7ED9\\u7C7B\\u578B\\u201CPick\\u201D\\u7684\\u53C2\\u6570\\u3002 ts(2345)\\n})\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"/**\\n * Extracts the type of the 'this' parameter of a function type, or 'unknown' if the function type has no 'this' parameter.\\n */\\ntype ThisParameterType = T extends (this: infer U, ...args: any[]) => any ? U : unknown;\\n\\n/**\\n * Removes the 'this' parameter from a function type.\\n */\\ntype OmitThisParameter = unknown extends ThisParameterType ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;\\n\\n/**\\n * Make all properties in T optional\\n */\\ntype Partial = {\\n [P in keyof T]?: T[P];\\n};\\n\\n/**\\n * Make all properties in T required\\n */\\ntype Required = {\\n [P in keyof T]-?: T[P];\\n};\\n\\n/**\\n * Make all properties in T readonly\\n */\\ntype Readonly = {\\n readonly [P in keyof T]: T[P];\\n};\\n\\n/**\\n * From T, pick a set of properties whose keys are in the union K\\n */\\ntype Pick = {\\n [P in K]: T[P];\\n};\\n\\n/**\\n * Construct a type with a set of properties K of type T\\n */\\ntype Record = {\\n [P in K]: T;\\n};\\n\\n/**\\n * Exclude from T those types that are assignable to U\\n */\\ntype Exclude = T extends U ? never : T;\\n\\n/**\\n * Extract from T those types that are assignable to U\\n */\\ntype Extract = T extends U ? T : never;\\n\\n/**\\n * Construct a type with the properties of T except for those in type K.\\n */\\ntype Omit = Pick>;\\n\\n/**\\n * Exclude null and undefined from T\\n */\\ntype NonNullable = T extends null | undefined ? never : T;\\n\\n/**\\n * Obtain the parameters of a function type in a tuple\\n */\\ntype Parameters any> = T extends (...args: infer P) => any ? P : never;\\n\\n/**\\n * Obtain the parameters of a constructor function type in a tuple\\n */\\ntype ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never;\\n\\n/**\\n * Obtain the return type of a function type\\n */\\ntype ReturnType any> = T extends (...args: any) => infer R ? R : any;\\n\\n/**\\n * Obtain the return type of a constructor function type\\n */\\ntype InstanceType any> = T extends new (...args: any) => infer R ? R : any;\\n\\n/**\\n * Marker for contextual 'this' type\\n */\\ninterface ThisType { }\\n\\n\")), mdx(\"h3\", null, \"9. \\u914D\\u5408 JSDoc \\u8FDB\\u884C\\u6CE8\\u91CA\"), mdx(\"p\", null, \"\\u7C7B\\u578B\\u58F0\\u660E\\u5F88\\u597D\\u7528\\uFF0C\\u4F46\\u662F\\u6CA1\\u529E\\u6CD5\\u52A0\\u6CE8\\u91CA\\uFF0C\\u6CE8\\u91CA\\u7684\\u6DFB\\u52A0\\u8FD8\\u662F\\u4F9D\\u9760 JSDoc \\u7B49\\u5DE5\\u5177\\uFF0C\\u4F46\\u662F\\u4E0D\\u9700\\u8981\\u5199\\u7C7B\\u578B\\uFF08\\u907F\\u514D\\u7C7B\\u578B\\u4E0E ts \\u4E0D\\u4E00\\u81F4\\uFF09\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface People {\\n /**\\n * \\u7528\\u6237\\u540D\\n */\\n name: string;\\n}\\n/**\\n * uid: user id \\u7528\\u6237\\u7684 id\\n*/\\nfunction callSomeOne(uid: number){\\n // # ...\\n}\\n\")), mdx(\"h3\", null, \"10. class \\u7EE7\\u627F\\u4E0D\\u540C\\u7684\\u8D4B\\u503C\\u65B9\\u6CD5\\u7684\\u4EE3\\u7801\\u63D0\\u793A\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5E76\\u4E0D\\u662F ts \\u7684\\u7279\\u6027\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u770B\\u5230\\u4E86\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u98CE\\u683C\\uFF0C\\u6BD4\\u5982\\u4E0B\\u9762\\u7684\\u4E24\\u79CD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\",\n \"metastring\": \"{2-4}\",\n \"{2-4}\": true\n }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n state = {\\n statusPool: {}\\n }\\n action = () => {\\n this.state\\n }\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\",\n \"metastring\": \"{4-6}\",\n \"{4-6}\": true\n }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n constructor(){\\n super();\\n this.state = {\\n statusPool: {}\\n }\\n }\\n action = () => {\\n this.state\\n }\\n};\\n\")), mdx(\"p\", null, \"\\u4E4B\\u524D\\u6211\\u4E00\\u76F4\\u5F88\\u597D\\u5947\\u540E\\u9762\\u8FD9\\u4E2A\\u662F\\u8981\\u5E72\\u561B\\uFF0C\\u8FD9\\u5C82\\u4E0D\\u662F\\u5F88\\u5947\\u602A\\u7684\\u505A\\u6CD5\\u5417\\uFF1F\\u660E\\u660E\\u9759\\u6001\\u7684\\u8D4B\\u503C\\u5C31\\u80FD\\u521D\\u59CB\\u5316\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u8FD8\\u8981\\u5728 constructor \\u91CC\\u9762\\u8FD0\\u884C\\u65F6\\u521D\\u59CB\\u5316\\u5462\\uFF1F\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u660E\\u767D\\u4E86\\uFF0C\\u56E0\\u4E3A React.Component \\u8FD9\\u4E2A\\u7236\\u7C7B\\u5DF2\\u7ECF\\u5728\\u521D\\u59CB\\u5316\\u7684\\u65F6\\u5019\\u62FF\\u5230\\u4E86 state \\u7684\\u6CDB\\u578B\\uFF0C\\u6240\\u4EE5\\u5982\\u679C\\u76F4\\u63A5\\u4F7F\\u7528 this.state \\u80FD\\u591F\\u770B\\u5230\\u4EE3\\u7801\\u63D0\\u793A\\u3002\"), mdx(\"p\", null, \"\\u65B9\\u6CD5\\u4E00\\u91CC\\u9762\\u7684\\u5C5E\\u6027\\uFF0C\\u8986\\u76D6\\u4E86\\u7236\\u7EC4\\u4EF6\\u7684\\u5C5E\\u6027\\uFF0C\\u5BF9\\u4E8E ts \\u6765\\u8BF4\\uFF0C\\u8FD9\\u4E2A state \\u7684\\u6CDB\\u578B\\u5C31\\u5931\\u6548\\u4E86\\uFF0C\\u5F53\\u7136 setState \\u65B9\\u6CD5\\u7684\\u63D0\\u793A\\u8FD8\\u662F\\u652F\\u6301\\u7684\\uFF0C\\u4F46\\u662F\\u76F4\\u63A5 this.state \\u8BBF\\u95EE\\u5C31\\u53D8\\u6210\\u4E86\\u5F53\\u524D\\u5B50\\u7C7B\\u7684 state \\u7684\\u7C7B\\u578B\\u63A8\\u65AD\\u4E86\\uFF0C\\u9664\\u975E\\u663E\\u5F0F\\u518D\\u6307\\u5B9A\\u7C7B\\u578B\\u3002\"), mdx(\"p\", null, \"\\u800C\\u65B9\\u6CD5\\u4E8C\\u6CA1\\u6709\\u7528\\u65B0\\u5C5E\\u6027\\u8986\\u76D6\\u7236\\u7C7B\\u7684\\u5C5E\\u6027\\uFF0C\\u800C\\u662F\\u5728\\u7236\\u7C7B\\u4E0A\\u8D4B\\u503C\\uFF0C\\u6240\\u4EE5\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u7136\\u7528\\u7684\\u662F\\u7236\\u7C7B\\u7684\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n // \\u4F7F\\u7528\\u8FD9\\u79CD\\u8D4B\\u503C\\u65B9\\u6CD5\\u4F1A\\u8986\\u76D6\\u6389\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4EE3\\u7801\\u63D0\\u793A\\u5C31\\u4F1A\\u53D8\\u6210\\u8FD9\\u4E2A\\u53D8\\u91CF\\n // state = {\\n // statusPool: {}\\n // }\\n // \\u4F7F\\u7528\\u8FD9\\u79CD\\u8D4B\\u503C\\u65B9\\u6CD5\\u4F1A\\u8986\\u76D6\\u6389\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4F46\\u662F\\u663E\\u5F0F\\u6307\\u5B9A\\u53C8\\u91CD\\u65B0\\u6307\\u5B9A\\u4E86\\n // state: IStatusBarState = {\\n // statusPool: {}\\n // }\\n constructor(){\\n super();\\n // \\u4F7F\\u7528\\u8D4B\\u503C\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u907F\\u514D\\u58F0\\u660E\\u8986\\u76D6\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u7701\\u53BB\\u4E86\\u663E\\u5F0F\\u6307\\u5B9A\\n this.state = {\\n statusPool: {}\\n }\\n }\\n action = () => {\\n this.state\\n }\\n};\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/flutter/flutter.md","id":"bbc7ba09-87e9-5f54-9e3a-9fb05f28af66","parent":{"name":"flutter","sourceInstanceName":"blog"},"excerpt":"想分享的是让你知道 flutter 是一个非常不错的跨端解决方案，在开发效率、编程体验、表现力、流畅等方面表现很好，能够承载出色的产品的实现。但是如果你们的生产环境要求比较严格、需求有些极致，还是有很多问题要注意的，不过技术本身的发展趋势还是很值得期待的。 〇、flutter 是什么? flutter 按照官方的定义是一个高性能、一致性的跨端 app SDK，关键词有跨平台、快速、高质量、漂亮、响应式，目标是构建出跨端的高性能应用。 Flutter is an app SDK for…","fields":{"title":"🎨 使用 flutter 构建移动端 App","slug":"/blog/flutter","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","date":"2019-11-10","redirects":null,"datetime":"2019-11-10 16:22:11","categories":["code"],"series":null,"tags":["整理","思考","flutter"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","flutter"],"theme":null,"slug":"flutter","date":"2019-11-10 16:22:11"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"flutter\",\n \"title\": \"🎨 使用 flutter 构建移动端 App\",\n \"date\": \"2019-11-10 16:22:11\",\n \"author\": \"Ubug\",\n \"description\": \"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\", \"flutter\"],\n \"banner\": \"../flutter-hero-with-image-fit/banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u4E0D\\u9519\\u7684\\u8DE8\\u7AEF\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u5728\\u5F00\\u53D1\\u6548\\u7387\\u3001\\u7F16\\u7A0B\\u4F53\\u9A8C\\u3001\\u8868\\u73B0\\u529B\\u3001\\u6D41\\u7545\\u7B49\\u65B9\\u9762\\u8868\\u73B0\\u5F88\\u597D\\uFF0C\\u80FD\\u591F\\u627F\\u8F7D\\u51FA\\u8272\\u7684\\u4EA7\\u54C1\\u7684\\u5B9E\\u73B0\\u3002\\u4F46\\u662F\\u5982\\u679C\\u4F60\\u4EEC\\u7684\\u751F\\u4EA7\\u73AF\\u5883\\u8981\\u6C42\\u6BD4\\u8F83\\u4E25\\u683C\\u3001\\u9700\\u6C42\\u6709\\u4E9B\\u6781\\u81F4\\uFF0C\\u8FD8\\u662F\\u6709\\u5F88\\u591A\\u95EE\\u9898\\u8981\\u6CE8\\u610F\\u7684\\uFF0C\\u4E0D\\u8FC7\\u6280\\u672F\\u672C\\u8EAB\\u7684\\u53D1\\u5C55\\u8D8B\\u52BF\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u671F\\u5F85\\u7684\\u3002\")), mdx(\"hr\", null), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"\\u4E1A\\u52A1\\u5E94\\u7528\\u6548\\u679C\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n controls: true,\n autoPlay: true,\n loop: true,\n style: {\n maxHeight: \"400px\",\n maxWidth: \"100%\"\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/tongyu-demo.mp4\",\n type: \"video/mp4\"\n })))), mdx(\"h2\", null, \"\\u3007\\u3001flutter \\u662F\\u4EC0\\u4E48?\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u6309\\u7167\\u5B98\\u65B9\\u7684\\u5B9A\\u4E49\\u662F\\u4E00\\u4E2A\\u9AD8\\u6027\\u80FD\\u3001\\u4E00\\u81F4\\u6027\\u7684\\u8DE8\\u7AEF app SDK\\uFF0C\\u5173\\u952E\\u8BCD\\u6709\\u8DE8\\u5E73\\u53F0\\u3001\\u5FEB\\u901F\\u3001\\u9AD8\\u8D28\\u91CF\\u3001\\u6F02\\u4EAE\\u3001\\u54CD\\u5E94\\u5F0F\\uFF0C\\u76EE\\u6807\\u662F\\u6784\\u5EFA\\u51FA\\u8DE8\\u7AEF\\u7684\\u9AD8\\u6027\\u80FD\\u5E94\\u7528\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web (beta), and desktop (technical preview) from a single codebase.\")), mdx(\"p\", null, \"\\u4F5C\\u4E3A\\u79FB\\u52A8\\u7AEF\\u7684\\u975E\\u5E38\\u706B\\u70ED\\u7684\\u8DE8\\u7AEF\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u4E0E\\u4E4B\\u524D\\u7684\\u8DE8\\u7AEF\\u5C1D\\u8BD5\\u4E0D\\u540C\\uFF0C\\u9996\\u5148\\u5B9A\\u4F4D\\u5C31\\u662F\\u5BA2\\u6237\\u7AEF\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6CA1\\u6709\\u91C7\\u7528 webView\\uFF0C\\u4E5F\\u6CA1\\u6709\\u91C7\\u7528 JS \\u6865\\u63A5\\u65B9\\u6848\\uFF0C\\u81EA\\u884C\\u5B9E\\u73B0\\u4E86\\u4E00\\u5957 UI \\u5B9E\\u73B0\\u65B9\\u6848\\uFF0C\\u901A\\u8FC7\\u5E95\\u5C42\\u7684\\u8DE8\\u5E73\\u53F0\\u7ED8\\u56FE\\u65B9\\u6848\\u6E32\\u67D3\\u754C\\u9762\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"825px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/7c0d03f5e7e930c9db72d279e76b129a/e3ddd/stru.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"53.28185328185329%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACmElEQVQozx1L608SAQC/v6Q+tvWlrfkos5apLXu4udJ8rLn60MpmIpmAOi2TNMuZmWUg+J7xGHcgyYmCD840QZATPeQpSQW6gLgHPpDrcPvtt98TmF4xmJyo4adVgH7rW9OIbDDoRMbsM0J0QrimEdvgwXUto5lc7piXbc4xGwE6MYrpfkWCQD8CwhjSaZSlSqsuyJ9lymtuqppyobrzsuoMObtQw7+hakyXsZjquqoxT9nADNKkVbfGm6x/HADsXjL4LJ/M0GUFh/lkg7wskMNwNsRj1qz53vKpjhyQlwPVXQG5WSCX0VkKbtEE3xZwAeN2w5zH9N4kPzNWmQvVF2naLik46VL2VaghRcLKVzcXfGtJlbCywbo0aXUOVF8Mv0mTsvOUjcnzlGsJ2bKIUPVt+EXJZEupll88+eoYLfemWmsXvrAMPUVwc+kk/+5xXqZ9fUfz8qG+A9vxAPAC6gmS8xjepsSFekKoI3qniXdqvEuDtx4n4hnirRpvV+PdcNL2TjNMMu3WDgUY7SHf7iG4vHetPVrRTzwZwCvERH5HtKQ7WtAZfTpE1IwShR+ihV14WU+UadkjRIUYL/uIewL7gCNAu4NHi474yHdatkzLjbRihZYs08+/JsoFCY6E5sroymGa0Q9E9KNBmidP8v0+2hM8BEzmFbfXE9r1RfyzYf9MeFsX3tZH/frNjVmzWb9h02E2HWrVWcxaixFaNakwq2rVpDQbwXAoANiQfi86HrIPUbqTlCElhmTEkFRy+sTB3KnE4tnDxXPxpcw4cjr+42ICYyfstXGsNrHJOVp/fBCyAHshjPrrIHdXKVd3zP055huJeUWUs4t09xEuAekdIL3DpLOH9GvIf0Eqsk1F/GQSv/eJ4H+2ZsVo6VdP/QAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"架构图\",\n \"title\": \"架构图\",\n \"src\": \"/static/7c0d03f5e7e930c9db72d279e76b129a/e3ddd/stru.png\",\n \"srcSet\": [\"/static/7c0d03f5e7e930c9db72d279e76b129a/2c191/stru.png 259w\", \"/static/7c0d03f5e7e930c9db72d279e76b129a/86b01/stru.png 518w\", \"/static/7c0d03f5e7e930c9db72d279e76b129a/e3ddd/stru.png 825w\"],\n \"sizes\": \"(max-width: 825px) 100vw, 825px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u67B6\\u6784\\u56FE\"), \"\\n \")), mdx(\"p\", null, \"\\u8DE8\\u7AEF\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u4E00\\u81F4\\u6027\\u548C\\u6027\\u80FD\\u662F\\u6BD4\\u8F83\\u91CD\\u8981\\u7684\\u70B9\\u3002\"), mdx(\"p\", null, \"\\u9AD8\\u6027\\u80FD\\u65B9\\u9762\\uFF1Aflutter \\u548C\\u5176\\u4ED6\\u5927\\u524D\\u7AEF\\u8DE8\\u5E73\\u53F0\\u6709\\u5F88\\u591A\\u4E0D\\u540C\\uFF0C\\u6CA1\\u6709 JS \\u8BED\\u8A00\\u7684\\u652F\\u6301\\u903B\\u8F91\\uFF0C\\u4E0D\\u9700\\u8981\\u6865\\u63A5\\u7684\\u6982\\u5FF5\\uFF0C\\u76F4\\u63A5\\u4E8C\\u8FDB\\u5236\\u652F\\u6301\\uFF0C\\u6027\\u80FD\\u548C\\u6D41\\u7545\\u5EA6\\u8981\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u81F4\\u6027\\u65B9\\u9762\\uFF1A\\u4F9D\\u9760\\u8DE8\\u5E73\\u53F0Skia\\u56FE\\u5F62\\u5E93\\u5B9E\\u73B0\\u8DE8\\u7AEF\\u7684\\u529F\\u80FD\\uFF0C\\u50CF\\u7D20\\u7EA7\\u522B\\u7684\\u4E00\\u81F4\\u6027\\u63A7\\u5236\\uFF0C\\u80FD\\u591F\\u4FDD\\u8BC1\\u76F8\\u540C\\u7684\\u754C\\u9762\\u4E00\\u81F4\\u6027\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"768px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/8ed645fedd956ae77dbacceef73a90f9/80a25/ui-same.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"79.53667953667953%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAACoElEQVQ4y22UbU/aYBSG94+WbO6bcR/8J/6Xfd32YUtwLApMAqhZRDbHgL0Qo0OWZZuGocg7tVAqbwWhLdZ7zzmOUoYnNLR97l49L8/dezc3N3BGt9vFeDyeuTfROLXD4RC1Wg26rs/o7tHJaDSCJEl8lEolVKtVFiuKMgdrt9u4uLhgTT6ft7WDwYDXGZjNZuHz+eD3+7G1tYVAIICNjQ2Ew2H0+307A9M0sbm5CZfLhbW1NXi9Xng8Hrjdbuzv70+BmUwGwWAQoVCIQfQQncdiMfR6PRtoGAa2t7dZSwmsrq7yS3d2dpBKpaZAKvWuaLVa6HQ69jW1ZiR6d1c0m02ugIE10QfLGM/1S1XVOaCs1P9NgIXiZ/El9dEGZvKnOKpkeEE3dBhigYJgNPVJXJtjBFIfcFj5jY7WwUBk278aimdM1Ot13h0MPM5n8TzpQ/z0AB9T3/Aze45m+xbmBJriQX/6HZ4drCN0FBW6nEhG7Iq6gkqlOs3wJP8HTxIvsf79LY7P88gVKyhUJe6hcyhjAXwR8+Dp19fISkUUyjUeFNVPc7CBv05P4Pr8BhVVQltt8QKJLi8vZ6esG0hnfkDuKtC6PdHTIWsty0Kj0ZiWTPTRSOdGm+Km5djEzpJpKATibIXu+tpiGMUccGIhKmEioq3wP5CypmCNw4ozQFlYqdvXoF1pAiimLOAD4RACOksmYKFQEFtHQVW6taYqNPRPlqWXMLBZbyB2dIhAJAhVkfEl8Qle9yvkzs6gadp0KCKDlZUV3H/4AEuPl7C8vIylxUU8WlhgO9pOyeVyiEQiiEajSCaTSCQSeL+3h3g8Pudl0oSF1SaW293dZTum0+kpkD5FxWKRyymVypw+fUlkWb7TPUWxXi6X7YP0kxf/BZulljujgT5lAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"一致性\",\n \"title\": \"一致性\",\n \"src\": \"/static/8ed645fedd956ae77dbacceef73a90f9/80a25/ui-same.png\",\n \"srcSet\": [\"/static/8ed645fedd956ae77dbacceef73a90f9/2c191/ui-same.png 259w\", \"/static/8ed645fedd956ae77dbacceef73a90f9/86b01/ui-same.png 518w\", \"/static/8ed645fedd956ae77dbacceef73a90f9/80a25/ui-same.png 768w\"],\n \"sizes\": \"(max-width: 768px) 100vw, 768px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u4E00\\u81F4\\u6027\"), \"\\n \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4E3A\\u4EC0\\u4E48\\u9009\\u62E9 Flutter\"), mdx(\"p\", null, \"\\u524D\\u7AEF\\u7684\\u6280\\u672F\\u9769\\u65B0\\u6D6A\\u6F6E\\u4E00\\u76F4\\u6CA1\\u6709\\u4E2D\\u65AD\\u8FC7\\uFF0C\\u4E5F\\u4E00\\u76F4\\u7528\\u5B9E\\u8DF5\\u6765\\u8865\\u5145\\u65B0\\u7684\\u80FD\\u529B\\uFF0C\\u8DF3\\u51FA\\u524D\\u7AEF\\u4E4B\\u5916\\u7684\\u6280\\u672F\\u4E5F\\u770B\\u4E86\\u5F88\\u591A\\u7684\\u6587\\u7AE0\\u548C\\u8BA2\\u9605\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u5728\\u6211\\u7684\\u9605\\u8BFB\\u4E2D\\u51FA\\u73B0\\u4E86\\u5F88\\u591A\\u6B21\\uFF0C\\u8BA9\\u6211\\u4E00\\u76F4\\u60F3\\u8981\\u5C1D\\u8BD5\\u8FD9\\u6837\\u4E00\\u4E2A\\u8DE8\\u5E73\\u53F0\\u65B9\\u9762\\u8FD8\\u80FD\\u517C\\u987E\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u6280\\u672F\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u6700\\u5927\\u7684\\u7279\\u70B9\\u5C31\\u662F\\u8DE8\\u5E73\\u53F0\\uFF0C\\u5C24\\u5176\\u662F\\u76EE\\u524D\\u5BA2\\u6237\\u7AEF \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Android\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IOS\"), \" \\u90FD\\u8981\\u517C\\u987E\\u7684\\u573A\\u666F\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"WebView\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Hybrid\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"RN\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Weex\"), \"\\xA0\\u7B49\\u5C1D\\u8BD5\\u4E5F\\u90FD\\u6CA1\\u505C\\u8FC7\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u51FA\\u8272\\u7684\\u6027\\u80FD\\uFF0C\\u52A0\\u4E0A\\u5927\\u516C\\u53F8\\u80CC\\u4E66\\uFF0C\\u8FD8\\u652F\\u6301\\u5D4C\\u5165\\u539F\\u751F\\u6A21\\u5F0F\\u7B49\\u4F18\\u70B9\\uFF0C\\u6210\\u4E3A\\u4E86\\u5F88\\u591A\\u516C\\u53F8\\u8DE8\\u7AEF\\u5F00\\u53D1\\u7684\\u65B0\\u9009\\u62E9\\u3002\\u76EE\\u524D\\u66F4\\u662F\\u8003\\u8651\\u4E86 web \\u548C \\u684C\\u9762\\u7AEF\\u7684\\u80FD\\u529B\\uFF0C\\u524D\\u9014\\u65E0\\u91CF\\u3002\"), mdx(\"p\", null, \"\\u5728\\u516C\\u53F8\\u65B0\\u7684\\u4E1A\\u52A1\\u8BBE\\u8BA1\\u4E2D\\u56E0\\u4E3A\\u6D89\\u53CA\\u5230\\u4E24\\u7AEF\\uFF0C\\u5F00\\u53D1\\u5DE5\\u4F5C\\u91CF\\u5F88\\u7D27\\u5F20\\uFF0C\\u4F5C\\u4E3A\\u524D\\u7AEF\\u80FD\\u591F\\u63D0\\u4F9B\\u7684\\u652F\\u6301\\u4E0D\\u591A\\uFF0C\\u6240\\u4EE5\\u6211\\u63D0\\u51FA\\u4E86\\u4E3B\\u8981\\u7684\\u754C\\u9762\\u5C42\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u5B9E\\u73B0\\uFF0C\\u800C\\u4E8C\\u4E09\\u7EA7\\u7684\\u4F9D\\u8D56\\u5E95\\u5C42\\u80FD\\u529B\\u7684\\u754C\\u9762\\u4F7F\\u7528\\u539F\\u751F\\u7684\\u6280\\u672F\\uFF0C\\u4E00\\u65B9\\u9762\\u5206\\u62C5\\u5F88\\u591A\\u7684\\u5F00\\u53D1\\u4EFB\\u52A1\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u80FD\\u591F\\u4E0D\\u9700\\u8981\\u4E24\\u5957\\u4EE3\\u7801\\u7684\\u7E41\\u7410\\u3002\"), mdx(\"p\", null, \"\\u5728\\u82B1\\u4E86\\u70B9\\u65F6\\u95F4\\u8C03\\u7814\\u5C55\\u793A\\u6548\\u679C\\u4E4B\\u540E\\uFF0C\\u56E2\\u961F\\u51B3\\u5B9A\\u91C7\\u7528\\u8FD9\\u4E2A\\u65B9\\u6848\\u3002\\u4E8B\\u5B9E\\u8BC1\\u660E\\u9879\\u76EE\\u8FDB\\u5EA6\\u6BD4\\u5206\\u522B\\u5F00\\u53D1\\u597D\\u5F97\\u591A\\uFF0C\\u6548\\u7387\\u80FD\\u6548\\u5F88\\u597D\\uFF0C\\u53EF\\u4EE5\\u80DC\\u4EFB\\u751F\\u4EA7\\u73AF\\u5883\\u3002\\u4F46\\u662F\\u5728\\u5B9E\\u65BD\\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u53D1\\u73B0\\u5982\\u679C\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u5C31\\u80FD\\u4E00\\u52B3\\u6C38\\u9038\\u7684\\u89E3\\u51B3\\u754C\\u9762\\u548C\\u4E1A\\u52A1\\u8FD8\\u662F too young \\u4E86\\u3002\"), mdx(\"p\", null, \"PS: \\u5F88\\u591A\\u7684\\u95EE\\u9898\\u53EF\\u80FD\\u662F\\u81EA\\u5DF1\\u7684\\u4E1A\\u52A1\\u5B9E\\u8DF5\\u4E0D\\u8DB3\\uFF0C\\u800C\\u4E14\\u9047\\u5230\\u95EE\\u9898\\u672C\\u8EAB\\u662F\\u4FC3\\u8FDB\\u89E3\\u51B3\\u65B9\\u6848\\u53D8\\u5F97\\u66F4\\u597D\\u7684\\u4E00\\u4E2A\\u9014\\u5F84\\uFF0C\\u7ED3\\u8BBA\\u662F\\u975E\\u5E38\\u770B\\u597D \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Flutter\"), \" \\u7684\\u5E94\\u7528\\u524D\\u666F\\uFF0C\\u6BEB\\u65E0\\u7591\\u95EE\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u7B80\\u5355\\u6BD4\\u8F83\"), mdx(\"p\", null, \"\\u6280\\u672F\\u672C\\u8EAB\\u6CA1\\u6709\\u4F18\\u7F3A\\u70B9\\uFF0C\\u53EA\\u662F\\u5177\\u4F53\\u7684\\u5E94\\u7528\\u6709\\u5F88\\u591A\\u65B9\\u9762\\u7684\\u4E0D\\u540C\\uFF0C\\u800C\\u4E14\\u4EC5\\u4EC5\\u662F\\u6211\\u4E2A\\u4EBA\\u89C2\\u70B9\\u3002\"), mdx(\"h3\", null, \"\\u8DE8\\u5E73\\u53F0\\u4E0E React Native \\u6BD4\\u8F83\"), mdx(\"p\", null, \"\\u4ECE\\u8DE8\\u5E73\\u53F0\\u65B9\\u9762\\u6765\\u8003\\u8651\\uFF0C\\u9996\\u5148\\u5F88\\u81EA\\u7136\\u7684\\u8DDF\\u4E4B\\u524D\\u7684 React Native \\u6BD4\\u8F83\\u3002RN \\u5F88\\u4E45\\u6CA1\\u6709\\u4E0A\\u624B\\uFF0C\\u76EE\\u524D\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u4E0D\\u77E5\\u9053\\u600E\\u4E48\\u6837\\uFF0C\\u4EE5\\u6211\\u7684\\u65E7\\u7ECF\\u9A8C\\u6765\\u770B\\u3002\\u754C\\u9762\\u6027\\u80FD\\u548C\\u5F00\\u53D1\\u4F53\\u9A8C\\u6BD4 RN \\u8981\\u597D\\u5F88\\u591A\\uFF0C\\u54CD\\u5E94\\u3001\\u6027\\u80FD\\u548C\\u52A8\\u753B\\u5F88\\u6D41\\u7545\\uFF0C\\u5927\\u5217\\u8868\\u7684\\u6ED1\\u52A8\\u975E\\u5E38\\u4E1D\\u6ED1\\uFF0C\\u70ED\\u91CD\\u8F7D\\u5F88\\u5FEB\\u7B49\\u7B49\\uFF0C\\u4E0D\\u81F3\\u4E8E\\u8BA9\\u6211\\u6709\\u4E0A\\u624B RN \\u540E\\uFF0C\\u5230\\u5904\\u76B1\\u7709\\u60F3\\u653E\\u5F03\\u90A3\\u79CD\\u611F\\u89C9\\u3002\\u4E0D\\u8FC7\\u597D\\u50CF\\u67E5\\u8D44 RN \\u76EE\\u524D\\u7684\\u6027\\u80FD\\u548C\\u4F53\\u9A8C\\u4E5F\\u6709\\u5F88\\u5927\\u6539\\u8FDB\\uFF0C\\u5177\\u4F53\\u8FD9\\u91CC\\u4E0D\\u6DF1\\u5165\\u4E86\\u3002\\u5927\\u5382\\u7684\\u5B9E\\u8DF5\\u4E5F\\u80FD\\u8BF4\\u660E\\u95EE\\u9898\\uFF0CFlutter \\u76EE\\u524D\\u5927\\u5382\\u91CC\\u7684\\u53E3\\u7891\\u867D\\u8BF4\\u6709\\u5F88\\u591A\\u6539\\u8FDB\\u548C\\u95EE\\u9898\\uFF0C\\u4E0D\\u8FC7\\u786E\\u5B9E\\u8981\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"h3\", null, \"Dart \\u4E0E Typescript \\u548C ES6+ \\u7684\\u6BD4\\u8F83\"), mdx(\"p\", null, \"\\u8BED\\u8A00\\u5C42\\u9762 Dart \\u8BED\\u8A00\\u8981\\u65B0\\u5B66\\u4E60\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u4E4B\\u524D\\u719F\\u6089 JAVA\\u3001Typescript \\u6216\\u8005 ES6+ \\u4EE5\\u53CA\\u9762\\u5411\\u5BF9\\u8C61\\u7F16\\u7A0B\\u6982\\u5FF5\\u7684\\u8BDD\\u4E0A\\u624B\\u4F1A\\u5F88\\u7B80\\u5355\\uFF1B\\u4EE3\\u7801\\u7EC4\\u7EC7\\u548C react \\u6709\\u70B9\\u50CF\\uFF0C\\u54CD\\u5E94\\u5F0F\\u7684\\u7EC4\\u4EF6\\u5316\\uFF0C\\u751A\\u81F3\\u6709\\u5F88\\u591A\\u7406\\u5FF5\\u5F88\\u901A\\u7528\\uFF1BUI \\u5C42\\u9762\\u5E76\\u6CA1\\u6709\\u5F88\\u9AD8\\u7684\\u95E8\\u69DB\\uFF0C\\u8868\\u73B0\\u529B\\u5F88\\u597D\\uFF0CJSX \\u7684\\u706B\\u70ED\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E5F\\u8BF4\\u660E\\u7C7B\\u4F3C\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u8FD8\\u662F\\u5F88\\u80FD\\u88AB\\u63A5\\u53D7\\u7684\\u3002\\u800C\\u4E14 Dart \\u7EBF\\u7A0B\\u6A21\\u5F0F\\u3001\\u4EE3\\u7801\\u7EC4\\u7EC7\\u65B9\\u5F0F\\u4EE5\\u53CA\\u8FD8\\u7B97\\u5F88\\u5B8C\\u5584\\u7684\\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u8BA9\\u5F00\\u53D1\\u95E8\\u69DB\\u90FD\\u6BD4\\u539F\\u751F\\u8981\\u4F4E\\u4E00\\u4E9B\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u611F\\u53D7\\u660E\\u663E\\u7684\\u4F18\\u70B9\"), mdx(\"h3\", null, \"\\u4E0A\\u624B\\u5F88\\u5FEB\\uFF0C\\u7ED3\\u679C\\u5F88\\u68D2\"), mdx(\"p\", null, \"\\u53EF\\u4EE5\\u8BF4\\u8FD9\\u662F\\u9664\\u4E86 js \\u8BA9\\u6211\\u6700\\u5FEB\\u4E0A\\u624B\\u7684\\u4E00\\u4E2A\\u6280\\u672F\\u3002\\u8BBF\\u95EE\\u5B98\\u7F51\\uFF08\\u63D0\\u4F9B\\u56FD\\u5185\\u4E13\\u7248\\u597D\\u8BC4\\uFF09\\uFF0C\\u4E0B\\u8F7D\\u6216\\u514B\\u9686\\u4E00\\u4E2A sdk\\uFF0C\\u8BBE\\u7F6E\\u73AF\\u5883\\u53D8\\u91CF\\uFF0Cflutter doctor \\u68C0\\u6D4B\\u95EE\\u9898\\u5E76\\u7ED9\\u51FA\\u8BE6\\u7EC6\\u8BF4\\u660E\\uFF0C\\u8FD8\\u7ED9\\u51FA\\u4FEE\\u590D\\u547D\\u4EE4\\uFF0C\\u7B80\\u76F4\\u4E0D\\u80FD\\u592A\\u5C0F\\u767D\\u53CB\\u597D\\uFF0C\\u800C\\u4E14\\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\\u7B49\\u652F\\u6301\\u4E5F\\u6E05\\u695A\\u660E\\u767D\\uFF0C\\u57FA\\u672C\\u4E0A\\u7F51\\u901F\\u6CA1\\u95EE\\u9898\\u7684\\u60C5\\u51B5\\uFF0C\\u534A\\u4E2A\\u5C0F\\u65F6\\u80FD\\u628A demo \\u8DD1\\u51FA\\u6765\\u3002\"), mdx(\"p\", null, \"\\u8DD1\\u51FA\\u4E00\\u4E2A\\u53EF\\u4EE5\\u4EA4\\u4E92\\u7684 counter \\u5B9E\\u4F8B\\u4E4B\\u540E\\uFF0C\\u9F13\\u6363\\u51FA\\u591A\\u9875\\u9762\\u7684\\u590D\\u6742\\u5E94\\u7528\\u57FA\\u672C\\u4E0A\\u4FEE\\u4FEE\\u6539\\u6539\\u5C31\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E86\\uFF0C\\u800C\\u4E14\\u5168\\u90FD\\u662F\\u7EC4\\u4EF6\\u5316\\u7684\\u601D\\u60F3\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9700\\u8981\\u8003\\u8651\\u6807\\u8BB0\\u3001\\u6837\\u5F0F\\u4E4B\\u7C7B\\u7684\\uFF0C\\u6284\\u4E0A\\u952E\\u76D8\\u5F00\\u59CB\\u5792\\u4EE3\\u7801\\u5C31\\u5B8C\\u4E86\\u3002\"), mdx(\"h3\", null, \"\\u7EC4\\u4EF6\\u5316\\u601D\\u60F3\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/diagram-widgetclass-a491a4292090e9425e477db7d4ba5902.svg\",\n \"alt\": \"widget class hierarchy\"\n })), mdx(\"p\", null, \"\\u5F97\\u76CA\\u4E8E dart \\u65B0\\u8BED\\u8A00\\uFF0C\\u903B\\u8F91\\u3001\\u6837\\u5F0F\\u3001\\u5E03\\u5C40\\u90FD\\u80FD\\u5728\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u7C92\\u5EA6\\u4E0A\\u805A\\u5408\\uFF0C\\u5F00\\u53D1\\u8005\\u80FD\\u591F\\u7075\\u6D3B\\u62C6\\u5206\\u62FC\\u88C5\\uFF0C\\u6240\\u4EE5\\u5F00\\u53D1\\u8FC7\\u7A0B\\u5F88\\u6D41\\u7545\\u3002\\u518D\\u52A0\\u4E0A\\u54CD\\u5E94\\u5F0F\\u7684\\u6570\\u636E\\u548C\\u754C\\u9762\\u7ED1\\u5B9A\\uFF0C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u529F\\u80FD\\u548C\\u7EC4\\u4EF6\\u57FA\\u672C\\u4E0A\\u5206\\u5206\\u949F\\u80FD\\u505A\\u5230\\uFF0C\\u8FD9\\u53EF\\u6BD4\\u539F\\u751F\\u7684\\u5F00\\u53D1\\u7075\\u6D3B\\u7684\\u591A\\u3002\\u6709\\u72B6\\u6001\\u548C\\u65E0\\u72B6\\u6001\\u7EC4\\u4EF6\\u7684\\u9884\\u8BBE\\u8DB3\\u591F\\u7B80\\u5355\\uFF0C\\u5185\\u7F6E\\u7684 \\u5B89\\u5353\\u548C IOS \\u9ED8\\u8BA4\\u6837\\u5F0F\\u7684\\u7EC4\\u4EF6\\u5E93\\u8DB3\\u591F\\u642D\\u8D77\\u4E00\\u4E2A\\u770B\\u8D77\\u6765\\u5F88\\u68D2\\u7684 demo \\u5E94\\u7528\\u3002\\u65E0\\u8BBA\\u4F60\\u4E4B\\u524D\\u6709\\u6CA1\\u6709\\u63A5\\u89E6\\u8FC7\\u7EC4\\u4EF6\\u5316\\u7684\\u62BD\\u8C61\\u601D\\u8003\\uFF0C\\u4E0A\\u624B\\u4E4B\\u540E\\uFF0C\\u5F88\\u5BB9\\u6613\\u4ECE\\u7B80\\u5355\\u7684\\u6309\\u94AE\\uFF0C\\u5230\\u7B80\\u5355\\u7684\\u9875\\u9762\\uFF0C\\u518D\\u5230\\u591A\\u9875\\u9762\\u590D\\u6742\\u7EC4\\u4EF6\\u5C01\\u88C5\\uFF0C\\u4E00\\u5207\\u90FD\\u5F88\\u81EA\\u7136\\u3002\"), mdx(\"h3\", null, \"\\u5F00\\u53D1\\u4F53\\u9A8C\\u5F88\\u4E0D\\u9519\"), mdx(\"p\", null, \"\\u5F97\\u76CA\\u4E8E\\u5B8C\\u5584\\u7684\\u63A5\\u53E3\\u80FD\\u529B\\u3001\\u6587\\u6863\\u652F\\u6301\\u548C\\u4EE3\\u7801\\u8865\\u5168\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u642D\\u5EFA\\u4E00\\u4E2A\\u7B80\\u5355 app\\uFF0C\\u57FA\\u7840\\u7EC4\\u4EF6\\u3001\\u8DEF\\u7531\\u3001\\u7F51\\u7EDC\\u8BF7\\u6C42\\u7B49\\u7B49\\u90FD\\u6709\\uFF0C\\u7A0D\\u5FAE\\u770B\\u4E0B\\u5C5E\\u6027\\u63A5\\u53E3\\u57FA\\u672C\\u4E0A\\u5C31\\u80FD\\u5199\\u51FA\\u6765\\u4E86\\u3002\\u6BD4\\u5982\\u5B98\\u65B9\\u5206\\u522B\\u63D0\\u4F9B\\u9ED8\\u8BA4\\u7EC4\\u4EF6\\u5E93\\uFF0C\\u6837\\u5F0F\\u98CE\\u683C\\u7EDF\\u4E00\\u3002\\u800C\\u4E14\\u6574\\u4E2A\\u5B98\\u7F51\\u7684\\u76EE\\u7684\\u5C31\\u662F\\u8BA9\\u4F60\\u4EE5\\u6700\\u5FEB\\u7684\\u901F\\u5EA6\\u5B9E\\u73B0\\u4E00\\u4E2Ademo\\uFF0C\\u800C\\u4E0D\\u662F\\u5404\\u79CD\\u94FA\\u57AB\\u548C\\u57FA\\u7840\\u6982\\u5FF5\\uFF0C\\u6587\\u6863\\u548C\\u63A5\\u53E3\\u611F\\u89C9\\u4E5F\\u662F\\u4E3A\\u4E86\\u5B9E\\u73B0\\u5E38\\u89C1\\u7684app\\u754C\\u9762\\uFF0C\\u5F88\\u591A\\u5E38\\u89C1\\u7684\\u7EC4\\u4EF6\\u90FD\\u88AB\\u62BD\\u8C61\\u5230\\u5B98\\u65B9\\u5E93\\uFF0C\\u65B0\\u624B\\u51E0\\u4E4E\\u4E0D\\u9700\\u8981\\u592A\\u6DF1\\u5165\\u7684\\u5B9A\\u5236\\u3002\\u800C\\u4E14\\u8FD8\\u6709 DevTools\\u3001Inspector\\u3001Performance\\u3001Profile\\u3001Memory \\u7B49\\u5DE5\\u5177\\u5E2E\\u52A9\\u6784\\u5EFA\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u6837\\u4E00\\u4E2A\\u5B66\\u4E60\\u66F2\\u7EBF\\u5BF9\\u5927\\u591A\\u8BF4\\u4EBA\\u7B80\\u76F4\\u592A\\u53CB\\u597D\\uFF0C\\u6240\\u4EE5\\u4E00\\u4E2A\\u597D\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u5BF9\\u4E00\\u95E8\\u8BED\\u8A00\\u7684\\u63A8\\u5E7F\\u8FD8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5F88\\u60F3\\u5410\\u69FD\\u7684\\u7F3A\\u70B9\"), mdx(\"p\", null, \"\\u7F3A\\u70B9\\u90E8\\u5206\\u5206\\u533A\\u524D\\u540E\\u671F\\uFF0C\\u524D\\u671F\\u6BD4\\u8F83\\u591A\\u7684\\u7F3A\\u70B9\\u53EF\\u80FD\\u90FD\\u662F\\u4E0D\\u4E60\\u60EF\\u3001\\u4E0D\\u548C\\u8C10\\uFF0C\\u4F46\\u662F\\u53EF\\u4EE5\\u89E3\\u51B3\\uFF0C\\u6700\\u7EC8\\u80FD\\u63A5\\u53D7\\u7684\\u3002\\u540E\\u671F\\u719F\\u7EC3\\u4E4B\\u540E\\uFF0C\\u4E1A\\u52A1\\u9700\\u6C42\\u9010\\u6B65\\u590D\\u6742\\u4E4B\\u540E\\uFF0C\\u6162\\u6162\\u7684\\u5C31\\u4F1A\\u51FA\\u73B0\\u5F88\\u591A\\u5E95\\u5C42\\u4E0D\\u7A33\\u5B9A\\u7684\\u5730\\u65B9\\u3002\"), mdx(\"h3\", null, \"\\u6DF7\\u5408\\u5F00\\u53D1\"), mdx(\"p\", null, \"\\u6574\\u4E2A\\u9879\\u76EE\\u662F\\u652F\\u6301\\u6DF7\\u5408\\u5F00\\u53D1\\u7684\\uFF0C\\u4F46\\u662F\\u6BD5\\u7ADF\\u662F\\u4E00\\u4E2A\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u548C\\u6E32\\u67D3\\u673A\\u5236\\uFF0C\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\u7279\\u522B\\u7075\\u6D3B\\u3002\\u6BD4\\u5982\\u8DEF\\u7531\\u95EE\\u9898\\u3001\\u5171\\u4EAB\\u6570\\u636E\\u8D44\\u6E90\\u95EE\\u9898\\u3001\\u57CB\\u70B9\\u76D1\\u63A7\\u3001\\u5F88\\u591ASDK\\u7B49\\uFF0C\\u6D89\\u53CA\\u5230\\u539F\\u751F\\u90E8\\u5206\\u7684\\u5730\\u65B9\\u90FD\\u6216\\u591A\\u6216\\u5C11\\u4E0D\\u592A\\u548C\\u8C10\\u3002\\u6BD4\\u5982\\u4E1A\\u52A1\\u5B89\\u6392\\u662F\\u539F\\u751F\\u548Cflutter\\u8DEF\\u7531\\u4EA4\\u9519\\u8DF3\\u8F6C\\uFF0C\\u6216\\u8005\\u5D4C\\u5165\\u5230\\u539F\\u751F\\u4E2D\\u4E00\\u90E8\\u5206\\uFF0C\\u6027\\u80FD\\u548C\\u4F53\\u9A8C\\u4F1A\\u6253\\u6298\\u6263\\u3002\\u6BD5\\u7ADF\\u4E00\\u4E2A view \\u5C31\\u662F\\u4E00\\u5957 dartvm\\uFF0C\\u9664\\u975E\\u5E95\\u5C42\\u9B54\\u6539\\u3002\\u516C\\u53F8\\u6CA1\\u6709\\u80FD\\u529B\\u5728\\u8FD9\\u4E9B\\u95EE\\u9898\\u4E0A\\u6295\\u5165\\u7CBE\\u529B\\uFF0C\\u6240\\u4EE5\\u4E00\\u7EA7\\u754C\\u9762\\u90FD\\u7528 dart \\u6765\\u5B9E\\u73B0\\uFF0C\\u6D89\\u53CA\\u5177\\u4F53\\u529F\\u80FD\\u624D\\u56DE\\u5230\\u539F\\u751F\\u4E2D\\u3002\\u8FD9\\u4E2A\\u4E0D\\u7B97\\u5927\\u7F3A\\u70B9\\uFF0C\\u53EF\\u4EE5\\u63A5\\u53D7\\u3002\"), mdx(\"h3\", null, \"\\u751F\\u6001\"), mdx(\"p\", null, \"\\u867D\\u7136\\u73B0\\u5728\\u53D1\\u5C55\\u8FC5\\u901F\\uFF0C\\u793E\\u533A\\u6D3B\\u8DC3\\uFF0C\\u4F46\\u662F\\u4E0D\\u53EF\\u5426\\u8BA4\\u8FD8\\u5DEE\\u5F88\\u591A\\uFF0C\\u751A\\u81F3\\u6BD4 RN \\u90FD\\u5DEE\\u5F97\\u8FDC\\uFF0C\\u4F46\\u662F\\u6BD5\\u7ADF\\u8FD9\\u662F\\u4E00\\u4E2A 17 \\u5E74\\u624D\\u8BDE\\u751F\\u7684\\u4E1C\\u897F\\uFF0C\\u5F88\\u591A\\u9700\\u6C42\\u6CA1\\u6709\\u7279\\u522B\\u591A\\u7684\\u793E\\u533A\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u793E\\u533A\\u7684\\u5305\\u4E5F\\u6709\\u5F88\\u591A\\u534A\\u6210\\u54C1\\uFF0C\\u7ECF\\u5E38\\u9700\\u8981\\u81EA\\u5DF1 DIY\\u3002\\u5F53\\u7136\\u73B0\\u5728 sdk \\u90FD\\u8FD8\\u5728\\u9AD8\\u901F\\u8FED\\u4EE3\\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u8FD9\\u70B9\\u6CA1\\u529E\\u6CD5\\u82DB\\u6C42\\uFF0C\\u4E0D\\u8FC7\\u6211\\u76F8\\u4FE1\\u793E\\u533A\\u6D3B\\u8DC3\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F88\\u5FEB\\u5C31\\u4F1A\\u6B23\\u6B23\\u5411\\u8363\\u7684\\u53D1\\u5C55\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u73B0\\u5728 pub.dev \\u4E0A\\u5305\\u591A\\u5F97\\u591A\\u4E86\\uFF0C\\u867D\\u7136\\u5F88\\u591A\\u5305\\u4E5F\\u662F\\u7EF4\\u62A4\\u5F88\\u5DEE\\uFF0C\\u4F46\\u662F\\u60F3\\u8981\\u7684\\u4E1C\\u897F\\u57FA\\u672C\\u4E0A\\u90FD\\u80FD\\u627E\\u5230\\u4E86\\u3002\")), mdx(\"h3\", null, \"\\u6807\\u51C6\\u5316\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u53D1\\u5C55\\u592A\\u5FEB\\uFF0C\\u6211\\u8BA4\\u4E3A\\u5B98\\u65B9\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u66F4\\u770B\\u91CD\\u7684\\u662F\\u586B\\u5751\\u800C\\u4E0D\\u662F\\u7EDF\\u4E00\\uFF0C\\u6240\\u4EE5\\u6211\\u5728\\u4F7F\\u7528\\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u672C\\u8EAB\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u7528\\u8D77\\u6765\\u5C31\\u975E\\u5E38\\u522B\\u626D\\uFF0C\\u6BD4\\u5982\\u57FA\\u7840\\u7EC4\\u4EF6\\u5404\\u79CD\\u5C5E\\u6027\\u83AB\\u540D\\u5176\\u5999\\uFF0C\\u8868\\u610F\\u4E0D\\u660E\\u3001\\u7EC4\\u4EF6\\u5404\\u4E2A\\u5C5E\\u6027\\u5F88\\u72EC\\u7ACB\\u3001\\u6837\\u5F0F\\u548C\\u5E03\\u5C40\\u6DF7\\u7528\\u3001matrial \\u548C cupertino \\u4E24\\u4E2A\\u5E93\\u5F88\\u4E0D\\u7EDF\\u4E00\\u7B49\\u7B49\\uFF0C\\u5F53\\u7136\\u5E76\\u4E0D\\u662F\\u5927\\u95EE\\u9898\\uFF0C\\u5C31\\u662F\\u7528\\u8D77\\u6765\\u4E0D\\u592A\\u4E60\\u60EF\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF0Ccontainer \\u7684 color \\u5C5E\\u6027\\u8868\\u793A\\u7684\\u662F decoration \\u7684 color \\u5C5E\\u6027\\u5F15\\u7528\\uFF0C\\u610F\\u601D\\u662F\\u5BB9\\u5668\\u80CC\\u666F\\u8272\\uFF0C\\u4E0D\\u662F backgroundcolor \\u800C\\u76F4\\u63A5\\u7528\\u4E86 color \\u5355\\u8BCD\\uFF0Ccss \\u7528\\u7684\\u591A\\u4E86\\u4F1A\\u975E\\u5E38\\u4ECB\\u610F\\uFF0C\\u540C\\u65F6\\u6837\\u5F0F\\u662F\\u76F4\\u63A5\\u5C5E\\u6027\\u3002text \\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u9700\\u8981\\u5199\\u5728 style \\u91CC\\u9762\\uFF0C\\u7528 fontstyle \\u8868\\u793A\\uFF0C\\u5176\\u4E2D\\u6709\\u4E00\\u4E2A color \\u5C5E\\u6027\\u8868\\u793A\\u6587\\u5B57\\u989C\\u8272\\u3002icon \\u7EC4\\u4EF6\\uFF0Ccolor \\u5374\\u662F\\u4E00\\u4E2A\\u76F4\\u63A5\\u5C5E\\u6027\\uFF0C\\u8868\\u793A\\u56FE\\u6807\\u989C\\u8272\\u3002\\u4E0D\\u540C\\u7684\\u7EC4\\u4EF6\\u5C5E\\u6027\\u8868\\u610F\\u53EF\\u80FD\\u6839\\u636E\\u7EC4\\u4EF6\\u8BBE\\u8BA1\\u6700\\u4F18\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u6211\\u53EF\\u80FD\\u89C9\\u5F97\\u6709\\u4E00\\u4E9B\\u5947\\u602A\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u8BB0\\u5FC6\\u7684\\u5F88\\u591A\\uFF0C\\u6709\\u81EA\\u52A8\\u8865\\u5168\\u52A0\\u4E0A\\u7528\\u7684\\u591A\\u4E86\\u4F1A\\u597D\\u4E00\\u4E9B\\uFF0C\\u4F46\\u662F\\u521D\\u5B66\\u8005\\u67E5\\u8868\\u662F\\u4E0D\\u4F1A\\u5C11\\u7684\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u5728\\u4EA7\\u54C1\\u8FED\\u4EE3\\u5F88\\u4E45\\u4E4B\\u540E\\uFF0C\\u7EC4\\u4EF6\\u5316\\u7684\\u5C01\\u88C5\\u548C\\u62BD\\u8C61\\uFF0C\\u8BA9\\u5185\\u7F6E\\u7684\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u7684\\u4F53\\u9A8C\\u5DEE\\u5F02\\u5F31\\u5316\\u4E86\\u4E00\\u4E9B\\u3002\")), mdx(\"h3\", null, \"\\u5D4C\\u5957\\u592A\\u6DF1\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u4E0D\\u662F\\u8BED\\u8A00\\u672C\\u8EAB\\u7684\\u7F3A\\u70B9\\uFF0C\\u800C\\u662F\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u4E0A\\u7684\\u9009\\u62E9\\uFF0C\\u7C7B\\u4F3C\\u7684\\u7EC4\\u4EF6\\u5316\\u90FD\\u662F\\u8FD9\\u4E2A\\u6837\\u5B50\\u7684\\uFF0C\\u5404\\u4E2A\\u7EC4\\u4EF6\\u7C7B\\u7684\\u5D4C\\u5957\\u53D8\\u6210\\u4E86\\u5D4C\\u5957\\u5730\\u72F1\\uFF0C\\u5728 react \\u4E2D\\uFF0C\\u4E13\\u95E8\\u5F15\\u5165\\u4E86 hooks \\u6765\\u7528\\u4E00\\u5C42\\u7EC4\\u4EF6\\u89E3\\u51B3\\u751F\\u547D\\u72B6\\u6001\\u7684\\u5F71\\u54CD\\u3002\\u4E0D\\u8FC7\\u4E5F\\u53EF\\u80FD\\u662F react \\u7684 render \\u6BD4 flutter \\u7684 build \\u66F4\\u91CD\\uFF0C\\u6240\\u4EE5\\u624D\\u663E\\u5F97\\u5D4C\\u5957\\u5F88\\u6DF1\\u4E0D\\u592A\\u597D\\uFF0Cflutter \\u8FD9\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u5F71\\u54CD\\u3002\"), mdx(\"h3\", null, \"Debug \\u6A21\\u5F0F\\u6709\\u4E9B\\u5361\\u987F\"), mdx(\"p\", null, \"Dart \\u6709 JIT(Just In Time) \\u548C AOT(Ahead Of Time) \\u7684\\u7F16\\u8BD1\\u6A21\\u5F0F\\u3002flutter \\u6BD4 dart \\u6709\\u589E\\u52A0\\u4E86\\u5F88\\u591A\\u7F16\\u8BD1\\u6A21\\u5F0F\\uFF0C\\u5728 debug \\u4E0B\\u65B9\\u4FBF\\u5F00\\u53D1\\u9700\\u8981\\u7167\\u987E\\u5230\\u70ED\\u91CD\\u8F7D\\u548C\\u65AD\\u70B9\\u7B49\\uFF0C\\u52A8\\u6001\\u751F\\u6210\\u4EE3\\u7801\\u3001\\u8C03\\u8BD5 UI \\u7B49\\uFF0C\\u4F7F\\u7528\\u7C7B\\u4F3C JIT \\u6A21\\u5F0F\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u8FD0\\u884C\\u4F18\\u5316\\u80AF\\u5B9A\\u4F1A\\u51FA\\u73B0\\u5361\\u987F\\uFF0C\\u5728\\u4E1A\\u52A1\\u4E0A\\u4E86\\u89C4\\u6A21\\u4E4B\\u540E\\uFF0C\\u8DEF\\u7531\\u4E24\\u4E09\\u5C42\\uFF0C\\u5341\\u51E0\\u4E2A\\u5217\\u8868\\u9875\\u9762\\u4E4B\\u540E\\uFF0C\\u4F4E\\u7AEF\\u673A\\u5668\\u5C31\\u660E\\u663E\\u5361\\u987F\\u4E86\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E5F\\u5C31\\u662F debug \\u6A21\\u5F0F\\u4E0B\\u70ED\\u66F4\\u65B0\\u7684\\u6298\\u4E2D\\u4E0D\\u80FD\\u82DB\\u6C42\\uFF0C\\u53EA\\u662F\\u4E9B\\u8BB8\\u7684\\u5F71\\u54CD\\u5F00\\u53D1\\u4F53\\u9A8C\\u3002\"), mdx(\"h3\", null, \"\\u5F00\\u53D1\\u4F53\\u9A8C\\u4E0D\\u662F\\u5F88\\u597D\"), mdx(\"p\", null, \"\\u5185\\u5B58\\u4F18\\u5316\\u3001\\u957F\\u56FE\\u7247\\u5217\\u8868\\u3001\\u591A\\u9875\\u9762\\u5806\\u6808\\u7B49\\u95EE\\u9898\\uFF0C\\u4E00\\u822C\\u9700\\u8981\\u82B1\\u5F88\\u591A\\u65F6\\u95F4\\u5904\\u7406\\uFF0C\\u867D\\u7136\\u5176\\u4ED6\\u5F00\\u53D1\\u4E5F\\u4F1A\\u6D89\\u53CA\\uFF0C\\u4F46\\u662F\\u8FD9\\u91CC\\u6D89\\u53CA\\u5230\\u539F\\u751F\\u7684\\u914D\\u5408\\uFF0C\\u6240\\u4EE5\\u8C03\\u8BD5\\u4F53\\u9A8C\\u4E0D\\u662F\\u5F88\\u597D\\u3002\"), mdx(\"h3\", null, \"Dart \\u8BED\\u8A00\\u771F\\u5FC3\\u6CA1\\u90A3\\u4E48\\u597D\\u7528\"), mdx(\"p\", null, \"\\u4E0A\\u624B\\u95E8\\u69DB\\u4E0D\\u9AD8\\uFF0C\\u4F46\\u662F\\u7528\\u591A\\u4E86\\u4E4B\\u540E\\u53D1\\u73B0\\u751F\\u6001\\u8FD8\\u6709\\u5F88\\u591A\\u4E0D\\u8DB3\\uFF0C\\u6D53\\u6D53\\u7684 JAVA OOPS \\u98CE\\u683C\\u3002\\u4E0E TypeScript \\u751F\\u6001\\u76F8\\u6BD4\\uFF0C\\u5728\\u8BED\\u8A00\\u8BBE\\u8BA1\\u4E0A\\u548C\\u751F\\u6001\\u5EFA\\u8BBE\\u4E0A\\u5E76\\u4E0D\\u592A\\u597D\\u3002\\u4E0D\\u8FC7 Dart \\u7684\\u7248\\u672C\\u8FED\\u4EE3\\u4E00\\u76F4\\u5F88\\u5FEB\\uFF0C\\u90FD\\u662F\\u5EFA\\u8BBE\\u4E2D\\u7684\\u4E1C\\u897F\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: null safety \\u4E0A\\u7EBF\\u540E\\uFF0C\\u6076\\u5FC3\\u7684\\u6539\\u4E86\\u65E7\\u4EE3\\u7801\\u4E4B\\u540E\\uFF0C\\u7C7B\\u578B\\u63A8\\u65AD\\u723D\\u4E86\\u5F88\\u591A\\u5F88\\u591A\\u3002\")), mdx(\"h3\", null, \"\\u8DE8\\u5E73\\u53F0ui\\u4E00\\u81F4\\u6027\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u4E4B\\u524D\\u4E00\\u76F4\\u89C9\\u5F97\\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u597D\\u7684\\u4F18\\u70B9\\uFF0C\\u56E0\\u4E3A\\u80FD\\u591F\\u4FDD\\u8BC1\\u7CBE\\u529B\\u4E0D\\u81F3\\u4E8E\\u5206\\u6563\\u5230\\u4E24\\u4E2A\\u5E73\\u53F0\\u3002\\u4F46\\u662F\\u6DF1\\u5165\\u4E4B\\u540E\\uFF0C\\u53D1\\u73B0\\u4E0D\\u4EC5\\u4EC5\\u9700\\u8981\\u61C2\\u5F97 dart\\uFF0C\\u539F\\u751F\\u5F00\\u53D1\\u80FD\\u529B\\u4E5F\\u662F\\u9700\\u8981\\u6D89\\u53CA\\u7684\\u3002\\u800C\\u4E14\\u5404\\u79CD\\u73AF\\u5883\\u95EE\\u9898\\u3001\\u9002\\u914D\\u95EE\\u9898\\u3001\\u5E73\\u53F0\\u5DEE\\u5F02\\u771F\\u7684\\u6709\\u65F6\\u5019\\u9700\\u8981\\u6298\\u817E\\uFF0C\\u751A\\u81F3\\u4F60\\u6320\\u7834\\u8111\\u95E8\\u4E5F\\u4E0D\\u77E5\\u9053\\u4E3A\\u5565\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u751F\\u4EA7\\u73AF\\u5883\\u9700\\u8981\\u6CE8\\u610F\"), mdx(\"h3\", null, \"1. \\u7A33\\u5B9A\\u6027\"), mdx(\"p\", null, \"\\u5D29\\u6E83\\u7387\\u662F\\u6709\\u70B9\\u9AD8\\u7684\\uFF0C\\u751F\\u4EA7\\u73AF\\u5883\\u7684\\u5E94\\u7528\\uFF0C\\u5343\\u5206\\u4E4B\\u51E0\\u7684\\u5D29\\u6E83\\u7387\\uFF08\\u8DDF\\u4EE3\\u7801\\u8D28\\u91CF\\u3001\\u76EE\\u6807\\u7528\\u6237\\u3001\\u4E1A\\u52A1\\u7C7B\\u578B\\u90FD\\u6709\\u5173\\u7CFB\\uFF09\\u3002\\u8FD9\\u4E2A\\u5BF9\\u4E8E\\u7528\\u6237\\u91CF\\u7A0D\\u5927\\u7684\\u516C\\u53F8\\u5C31\\u662F\\u4E00\\u4E2A\\u6B7B\\u5211\\u4E86\\uFF0C\\u6BD5\\u7ADF\\u4E07\\u5206\\u4E4B\\u4E00\\u7684\\u5D29\\u6E83\\u7387\\u624D\\u52C9\\u5F3A\\u80FD\\u63A5\\u53D7\\uFF0C\\u6211\\u4EEC\\u5728\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u4E5F\\u662F\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u5954\\u6E83\\u7684\\u60C5\\u51B5\\uFF0C\\u867D\\u7136\\u90FD\\u80FD\\u89E3\\u51B3\\uFF0C\\u4F46\\u662F\\u8FD8\\u662F\\u6709\\u6982\\u7387\\u89E6\\u53D1\\u4E25\\u91CD bug\\uFF0C\\u51FA\\u73B0\\u4F53\\u9A8C\\u95EE\\u9898\\uFF0C\\u800C\\u4E14\\u90FD\\u662F\\u5076\\u53D1\\u7684\\uFF0C\\u5F88\\u96BE\\u53BB\\u8C03\\u8BD5\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u7ECF\\u5386\\u4E86\\u5F88\\u957F\\u65F6\\u95F4\\u7684\\u4F18\\u5316\\u540E\\uFF0C\\u73B0\\u5728\\u4EA7\\u54C1\\u7A33\\u5B9A\\u6027\\u597D\\u5F88\\u591A\\u3002\")), mdx(\"h3\", null, \"2. \\u4EE3\\u7801\\u8D28\\u91CF\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u4E86\\u8FD9\\u4E2A\\u751F\\u6001\\u76EE\\u524D\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u6210\\u719F\\uFF0C\\u6240\\u4EE5\\u7B2C\\u4E09\\u65B9\\u652F\\u6301\\u4E0D\\u662F\\u5F88\\u597D\\uFF0C\\u6BD4\\u5982\\u63D2\\u4EF6\\u548C\\u5E93\\u7684\\u9009\\u62E9\\uFF0C\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u7684\\u63D2\\u4EF6\\u4EE3\\u7801\\u8D28\\u91CF\\u6CA1\\u6CD5\\u786E\\u4FDD\\uFF0C\\u6BD5\\u7ADF\\u5F88\\u591A\\u90FD\\u662F\\u9A8C\\u8BC1\\u6027\\u7684\\u65B9\\u6848\\uFF0C\\u6CA1\\u6709\\u5927\\u91CF\\u751F\\u4EA7\\u73AF\\u5883\\u7684\\u9A8C\\u8BC1\\uFF0C\\u5F88\\u5BB9\\u6613\\u51FA\\u73B0\\u95EE\\u9898\\u3002\\u751A\\u81F3\\u7ECF\\u5E38\\u4F1A\\u6709\\u9700\\u6C42\\u53D8\\u66F4\\u7684\\u65F6\\u5019\\uFF0C\\u9700\\u8981\\u4FEE\\u6539\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u751A\\u81F3\\u8F6C\\u4E3A\\u5185\\u90E8\\u7EF4\\u62A4\\u3002\\u6211\\u4EEC\\u5185\\u90E8\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\uFF0C\\u56E0\\u4E3A\\u6392\\u671F\\u6BD4\\u8F83\\u7D27\\u5F20\\uFF0C\\u5F88\\u591A\\u65B9\\u6848\\u4F7F\\u7528\\u4E86\\u7B2C\\u4E09\\u65B9\\u7684\\uFF0C\\u4EE3\\u7801\\u8D28\\u91CF\\u826F\\u83A0\\u4E0D\\u9F50\\uFF0C\\u4E00\\u90E8\\u5206\\u7684\\u5B9E\\u73B0\\u9700\\u8981\\u9B54\\u6539\\uFF0C\\u6216\\u8005\\u6DFB\\u52A0\\u8FB9\\u754C\\u6761\\u4EF6\\u624D\\u80FD\\u9002\\u5408\\u6211\\u4EEC\\u7684\\u4E1A\\u52A1\\uFF0C\\u4EE3\\u7801\\u8D28\\u91CF\\u6709\\u65F6\\u5019\\u4E5F\\u662F\\u60F3\\u9A82\\u4EBA\\u3002\\u4E0D\\u8FC7\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u8FD8\\u662F\\u597D\\u7684\\uFF0C\\u90FD\\u8FD8\\u7B97\\u80FD\\u63A5\\u53D7\\u3002\"), mdx(\"h3\", null, \"3. \\u6027\\u80FD\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u5728\\u51B3\\u5B9A\\u7740\\u624B\\u4E1A\\u52A1\\u4E4B\\u524D\\u7684\\u8C03\\u7814\\u9636\\u6BB5\\uFF0C\\u5DF2\\u7ECF\\u89C1\\u8BC6\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flutter\"), \" \\u5728\\u6027\\u80FD\\u4E0A\\u662F\\u600E\\u4E48\\u5AB2\\u7F8E\\u539F\\u751F\\uFF0C\\u540A\\u6253\\u4E00\\u4F17 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"frontend based frameworks\"), \" \\u7684\\uFF0C\\u6240\\u4EE5\\u8BA4\\u4E3A\\u6027\\u80FD\\u95EE\\u9898\\u4E0D\\u81F3\\u4E8E\\u6210\\u4E3A\\u74F6\\u9888\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5728\\u505A\\u4E86\\u5F88\\u591A\\u9875\\u9762\\u4E4B\\u540E\\uFF0C\\u53D1\\u73B0\\u6027\\u80FD\\u8FD8\\u662F\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\uFF0C\\u5361\\u987F\\u95EE\\u9898\\u4E5F\\u662F\\u9700\\u8981\\u4E13\\u9879\\u89E3\\u51B3\\u3002\\u4E0D\\u8FC7\\u539F\\u751F\\u4EE3\\u7801\\u4E5F\\u9700\\u8981\\u8003\\u8651\\u6027\\u80FD\\uFF0C\\u8FD9\\u4E2A\\u4E0D\\u5FC5\\u591A\\u8BF4\\uFF0C\\u5C31\\u662F\\u6CA1\\u529E\\u6CD5\\u518D\\u8BA4\\u540C\\u6027\\u80FD\\u548C\\u539F\\u751F\\u80FD\\u5AB2\\u7F8E\\uFF0C\\u53EA\\u80FD\\u8BF4\\u8FD8\\u6709\\u5F88\\u591A\\u80FD\\u6539\\u8FDB\\u7684\\u5730\\u65B9\\u3002\\u6BD4\\u5982\\u8DEF\\u7531\\u9875\\u9762\\u5806\\u6808\\u4E00\\u65E6\\u6BD4\\u8F83\\u591A\\uFF0C\\u800C\\u4E14\\u90FD\\u6BD4\\u8F83\\u590D\\u6742\\u7684\\u65F6\\u5019\\uFF0C\\u9875\\u9762\\u4F9D\\u7136\\u4F1A\\u51FA\\u73B0\\u5361\\u987F\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u6027\\u80FD\\u6709\\u95EE\\u9898\\uFF0C\\u5927\\u90E8\\u5206\\u786E\\u5B9E\\u505A\\u4E86\\u5F88\\u591A\\u7684\\u8BA1\\u7B97\\uFF0C\\u5F00\\u53D1\\u4E0A\\u8FD8\\u662F\\u80FD\\u591F\\u89C4\\u907F\\u5F88\\u591A\\u7684\\u8FD9\\u7C7B\\u95EE\\u9898\\u7684\\u3002\"), mdx(\"h3\", null, \"4. \\u5185\\u5B58\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u5185\\u5B58\\u95EE\\u9898\\u53EF\\u80FD\\u5C31\\u6BD4\\u8F83\\u666E\\u904D\\u4E86\\uFF0C\\u5C24\\u5176\\u662F ios \\u7AEF\\u3002\\u5185\\u5B58\\u5360\\u7528\\u95EE\\u9898\\u3001\\u5185\\u5B58\\u6CC4\\u9732\\u5BFC\\u81F4\\u5D29\\u6E83\\u7684\\u6709\\u5F88\\u591A\\u3002\\u4F18\\u5316\\u65B9\\u6CD5\\u4E5F\\u5F88\\u6709\\u9650\\uFF0C\\u6BD5\\u7ADF flutter \\u4F5C\\u4E3A\\u5E94\\u7528\\u754C\\u9762\\u7ED8\\u5236\\u5F15\\u64CE\\uFF0C\\u5185\\u5B58\\u4E0A\\u6CA1\\u529E\\u6CD5\\u505A\\u7684\\u592A\\u5E72\\u51C0\\u3002\\u5BFC\\u81F4\\u6211\\u4E00\\u76F4\\u6000\\u7591 Google \\u7684\\u5DE5\\u7A0B\\u5E08\\u662F\\u4E0D\\u662F\\u89C9\\u5F97\\u5185\\u5B58\\u7684\\u95EE\\u9898\\u5C31\\u4ECE\\u6765\\u4E0D\\u662F\\u4E2A\\u95EE\\u9898\\uFF0CChrome \\u5185\\u5B58\\u4E5F\\u662F\\u8FD9\\u4E2A\\u9B3C\\u6837\\u5B50\\uFF0C\\u611F\\u89C9\\u7535\\u8111\\u4E0A\\u5582\\u4E86\\u4E00\\u4E2A\\u7279\\u522B\\u80FD\\u5403\\u5185\\u5B58\\u7684 Chrome \\u602A\\u517D\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u95EE\\u9898\\u7684\\u89E3\\u51B3\\u5F88\\u591A\\u4E5F\\u662F\\u4E1A\\u52A1\\u5C42\\u9762\\u7684\\u95EE\\u9898\\uFF0C\\u6BD4\\u5982\\u4E1A\\u52A1\\u4E2D\\u9700\\u8981\\u5927\\u91CF\\u7684\\u56FE\\u7247\\uFF0C\\u5217\\u8868\\u5927\\u6982\\u6709\\u51E0\\u767E\\u5F20\\u7F29\\u7565\\u56FE\\uFF0C\\u5FEB\\u901F\\u6ED1\\u52A8\\u600E\\u4E48\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u6574\\u4E2A\\u6EDA\\u52A8\\u5217\\u8868\\u91CC\\u9762\\u56FE\\u7247\\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u5F88\\u53EF\\u6015\\uFF0Cflutter \\u81EA\\u5DF1\\u6709\\u4E00\\u5957\\u5728 viewPort \\u5916\\u88AB\\u5F3A\\u5236\\u56DE\\u6536\\u7684\\u903B\\u8F91\\uFF0C\\u800C\\u4E14\\u52A0\\u4E0A\\u7EC4\\u4EF6\\u7684\\u9500\\u6BC1\\u548C\\u91CD\\u5EFA\\u903B\\u8F91\\u4EE5\\u51CF\\u5C11\\u5185\\u5B58\\u7684\\u5360\\u7528\\uFF0C\\u4ECD\\u7136\\u7ECF\\u5E38\\u51FA\\u73B0\\u6ED1\\u52A8\\u591A\\u6B21\\u3001\\u5207\\u6362\\u9875\\u9762\\u7B49\\u64CD\\u4F5C\\u4E4B\\u540E\\u5185\\u5B58\\u5C31\\u66B4\\u589E\\uFF0C\\u7136\\u540Eapp\\u5D29\\u6E83\\u3002\"), mdx(\"p\", null, \"\\u4E3A\\u6B64\\u771F\\u7684\\u82B1\\u4E86\\u5F88\\u591A\\u7CBE\\u529B\\u5C1D\\u8BD5\\u89E3\\u51B3\\uFF0C\\u53EF\\u4EE5\\u67E5\\u770B (flutter \\u6027\\u80FD\\u4F18\\u5316)\", \"[./flutter-performance]\", \" \\u770B\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u516D\\u3001\\u603B\\u7ED3\"), mdx(\"p\", null, \"flutter \\u8FD9\\u4E2A\\u5F3A\\u5927\\u7684\\u5B58\\u5728\\u4E5F\\u4E0D\\u662F\\u4E00\\u7BC7\\u6587\\u7AE0\\u5C31\\u80FD\\u8BF4\\u7684\\u660E\\u767D\\u7684\\uFF0C\\u4F18\\u7F3A\\u70B9\\u4E5F\\u5168\\u90FD\\u662F\\u6211\\u7684\\u81EA\\u6211\\u7406\\u89E3\\uFF0C\\u66F4\\u4F55\\u51B5\\u73B0\\u5728\\u4E5F\\u5E76\\u4E0D\\u662F\\u6211\\u7684\\u4E3B\\u8981\\u5F00\\u53D1\\u8BED\\u8A00\\uFF0C\\u867D\\u7136\\u975E\\u5E38\\u611F\\u5174\\u8DA3\\uFF0C\\u82B1\\u4E86\\u5F88\\u591A\\u65F6\\u95F4\\u505A\\u51FA\\u6765\\u4E86\\u4EA7\\u54C1\\uFF0C\\u4F46\\u662F\\u5F88\\u591A\\u6DF1\\u5165\\u7684\\u4E1C\\u897F\\u6CA1\\u6765\\u5F97\\u53CA all in flutter\\uFF0C\\u76F8\\u4FE1\\u5982\\u679C\\u4E1A\\u52A1\\u4E2D\\u8FD9\\u5757\\u52A0\\u7801\\u53D1\\u5C55\\u4E86\\uFF0C\\u80AF\\u5B9A\\u80FD\\u53D1\\u73B0\\u66F4\\u591A\\u597D\\u73A9\\u6709\\u8DA3\\u7684\\u4E1C\\u897F\\u3002\\u6211\\u4E5F\\u975E\\u5E38\\u770B\\u597D flutter \\u7684\\u53D1\\u5C55\\uFF0C2020 \\u4E00\\u5B9A\\u5728\\u8FD9\\u65B9\\u9762\\u5C1D\\u8BD5\\u4E00\\u4E9B\\u4E0D\\u4E00\\u6837\\u7684\\u4E1C\\u897F\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}